页面修改

This commit is contained in:
zmj 2023-11-11 18:08:10 +08:00
parent 69c89d5ad1
commit 94bf0a5e95
22 changed files with 3656 additions and 1 deletions

View File

@ -1,7 +1,7 @@
{ {
"editor.formatOnSave": true, "editor.formatOnSave": true,
"[vue]": { "[vue]": {
"editor.defaultFormatter": "esbenp.prettier-vscode" "editor.defaultFormatter": "Vue.volar"
}, },
"editor.defaultFormatter": "esbenp.prettier-vscode", "editor.defaultFormatter": "esbenp.prettier-vscode",

View File

@ -0,0 +1,244 @@
<template>
<div>
<el-card>
<el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="120px" label-position="left">
<el-row :gutter="10">
<el-col :span="12">
<el-form-item label="供应商名称" prop="field101">
<el-input v-model="formData.field101" placeholder="点击选择供应商" :disabled='true' clearable
:style="{ width: '100%' }"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="供应商编码" prop="field102">
<el-input v-model="formData.field102" placeholder="系统自动填写" :disabled='true' clearable
:style="{ width: '100%' }"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="合同编号" prop="field103">
<el-input v-model="formData.field103" placeholder="系统自动生成" :disabled='true' clearable
:style="{ width: '100%' }"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="合同名称" prop="field104">
<el-input v-model="formData.field104" placeholder="请输入合同名称" clearable
:style="{ width: '100%' }">
</el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="采购分类" prop="field105">
<el-radio-group v-model="formData.field105" size="medium">
<el-radio v-for="(item, index) in field105Options" :key="index" :label="item.value"
:disabled="item.disabled">{{ item.label }}</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="资产申请单号" prop="field106">
<el-input v-model="formData.field106" placeholder="点击选择资产单号" :disabled='true' clearable
:style="{ width: '100%' }"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="开始日期" prop="field108">
<el-date-picker v-model="formData.field108" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
:style="{ width: '100%' }" placeholder="请选择开始日期" clearable></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="结束日期" prop="field109">
<el-date-picker v-model="formData.field109" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
:style="{ width: '100%' }" placeholder="请选择结束日期" clearable></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="签约日期" prop="field110">
<el-date-picker v-model="formData.field110" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
:style="{ width: '100%' }" placeholder="请选择签约日期" clearable></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="付款方式" prop="field111">
<el-select v-model="formData.field111" placeholder="请选择付款方式" clearable
:style="{ width: '100%' }">
<el-option v-for="(item, index) in field111Options" :key="index" :label="item.label"
:value="item.value" :disabled="item.disabled"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="合同金额" prop="field112">
<el-input v-model="formData.field112" placeholder="请输入合同金额" clearable
:style="{ width: '100%' }">
</el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="合同金额大写" prop="field113">
<el-input v-model="formData.field113" placeholder="系统自动填写" :disabled='true' clearable
:style="{ width: '100%' }"></el-input>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="合同主要条款" prop="field114">
<el-input v-model="formData.field114" type="textarea" placeholder="请输入合同主要条款"
:autosize="{ minRows: 4, maxRows: 4 }" :style="{ width: '100%' }"></el-input>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="备注" prop="field116">
<el-input v-model="formData.field116" placeholder="请输入备注" clearable :style="{ width: '100%' }">
</el-input>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="附件" prop="field117" required>
<el-upload ref="field117" :file-list="field117fileList" :action="field117Action"
:before-upload="field117BeforeUpload">
<el-button size="small" type="primary" icon="el-icon-upload">点击上传</el-button>
</el-upload>
</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-row>
</el-form>
</el-card>
</div>
</template>
<script>
export default {
components: {},
props: [],
data() {
return {
formData: {
field101: undefined,
field102: undefined,
field103: undefined,
field104: undefined,
field105: 1,
field106: undefined,
field108: null,
field109: null,
field110: null,
field111: undefined,
field112: undefined,
field113: undefined,
field114: undefined,
field116: undefined,
field117: null,
},
rules: {
field101: [{
required: true,
message: '点击选择供应商',
trigger: 'blur'
}],
field102: [{
required: true,
message: '系统自动填写',
trigger: 'blur'
}],
field103: [],
field104: [{
required: true,
message: '请输入合同名称',
trigger: 'blur'
}],
field105: [{
required: true,
message: '采购分类不能为空',
trigger: 'change'
}],
field106: [{
required: true,
message: '点击选择资产单号',
trigger: 'blur'
}],
field108: [{
required: true,
message: '请选择开始日期',
trigger: 'change'
}],
field109: [{
required: true,
message: '请选择结束日期',
trigger: 'change'
}],
field110: [],
field111: [{
required: true,
message: '请选择付款方式',
trigger: 'change'
}],
field112: [{
required: true,
message: '请输入合同金额',
trigger: 'blur'
}],
field113: [{
required: true,
message: '系统自动填写',
trigger: 'blur'
}],
field114: [],
field116: [],
},
field117Action: 'https://jsonplaceholder.typicode.com/posts/',
field117fileList: [],
field105Options: [{
"label": "资产采购",
"value": 1
}, {
"label": "行政采购",
"value": 2
}],
field111Options: [{
"label": "选项一",
"value": 1
}, {
"label": "选项二",
"value": 2
}],
}
},
computed: {},
watch: {},
created() { },
mounted() { },
methods: {
submitForm() {
this.$refs['elForm'].validate(valid => {
if (!valid) return
// TODO
})
},
resetForm() {
this.$refs['elForm'].resetFields()
},
field117BeforeUpload(file) {
let isRightSize = file.size / 1024 / 1024 < 2
if (!isRightSize) {
this.$message.error('文件大小超过 2MB')
}
return isRightSize
},
}
}
</script>
<style>
.el-upload__tip {
line-height: 1.2;
}
</style>

View File

@ -0,0 +1,286 @@
<template>
<div>
<el-card>
<el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="120px" label-position="left">
<el-row :gutter="10">
<el-col :span="12">
<el-form-item label="合同编号" prop="field102">
<el-input v-model="formData.field102" placeholder="点击选择合同编号" :disabled='true' clearable
suffix-icon='el-icon-search' :style="{ width: '100%' }"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="签订日期" prop="field106">
<el-date-picker v-model="formData.field106" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
:style="{ width: '100%' }" placeholder="请输入签约日期" clearable
:disabled='true'></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="供应商" prop="field102">
<el-input v-model="formData.field102" placeholder="系统自动填写" :disabled='true' clearable
suffix-icon='el-icon-search' :style="{ width: '100%' }"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="供应商编码" prop="field102">
<el-input v-model="formData.field102" placeholder="系统自动填写" :disabled='true' clearable
suffix-icon='el-icon-search' :style="{ width: '100%' }"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="项目名称" prop="field103">
<el-input v-model="formData.field103" placeholder="点击选择项目名称" :disabled='true' clearable
suffix-icon='el-icon-search' :style="{ width: '100%' }"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="项目编码" prop="field102">
<el-input v-model="formData.field102" placeholder="系统自动填写" :disabled='true' clearable
suffix-icon='el-icon-search' :style="{ width: '100%' }"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="治商编号" prop="field110">
<el-input v-model="formData.field110" placeholder="系统自动获取" :disabled='true' clearable
:style="{ width: '100%' }"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="治商单位名称" prop="field109">
<el-input v-model="formData.field109" placeholder="请输入治商单位名称" clearable
:style="{ width: '100%' }">
</el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="治商金额" prop="field111">
<el-input v-model="formData.field111" placeholder="请输入治商金额" clearable
:style="{ width: '100%' }">
</el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="治商类别" prop="field135">
<el-radio-group v-model="formData.field135" size="medium">
<el-radio v-for="(item, index) in field135Options" :key="index" :label="item.value"
:disabled="item.disabled">{{ item.label }}</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="治商质保金额" prop="field138">
<el-input v-model="formData.field138" placeholder="请输入治商质保金额" clearable
:style="{ width: '100%' }">
</el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="治商质保到期时间" prop="field139" label-width="130px">
<el-input v-model="formData.field139" placeholder="请输入治商质保到期时间" clearable
:style="{ width: '100%' }"></el-input>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="治商内容" prop="field142">
<el-input v-model="formData.field142" type="textarea" placeholder="请输入治商内容"
:autosize="{ minRows: 4, maxRows: 4 }" :style="{ width: '100%' }"></el-input>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="具体说明" prop="field143">
<el-input v-model="formData.field143" type="textarea" placeholder="请输入具体说明"
:autosize="{ minRows: 4, maxRows: 4 }" :style="{ width: '100%' }"></el-input>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="签证报价表" prop="field144">
<el-upload ref="field144" :file-list="field144fileList" :action="field144Action"
:before-upload="field144BeforeUpload">
<el-button size="small" type="primary" icon="el-icon-upload">点击上传</el-button>
</el-upload>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="治商依据" prop="field145">
<el-upload ref="field145" :file-list="field145fileList" :action="field145Action"
:before-upload="field145BeforeUpload">
<el-button size="small" type="primary" icon="el-icon-upload">点击上传</el-button>
</el-upload>
</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-row>
</el-form>
</el-card>
</div>
</template>
<script>
export default {
components: {},
props: [],
data() {
return {
formData: {
field101: undefined,
field102: undefined,
field103: undefined,
field104: undefined,
field107: undefined,
field105: undefined,
field106: undefined,
field108: undefined,
field109: undefined,
field110: undefined,
field111: undefined,
field135: 1,
field136: undefined,
field137: undefined,
field138: undefined,
field139: undefined,
field140: undefined,
field141: undefined,
field142: undefined,
field143: undefined,
field144: null,
field145: null,
},
rules: {
field101: [{
required: true,
message: '点击选择合同',
trigger: 'blur'
}],
field102: [{
required: true,
message: '点击选择合同编号',
trigger: 'blur'
}],
field103: [{
required: true,
message: '点击选择项目名称',
trigger: 'blur'
}],
field104: [{
required: true,
message: '系统自动填写',
trigger: 'blur'
}],
field107: [{
required: true,
message: '系统自动填写',
trigger: 'change'
}],
field105: [{
required: true,
message: '系统自动获取',
trigger: 'blur'
}],
field106: [{
required: true,
message: '请输入签约日期',
trigger: 'change'
}],
field108: [{
required: true,
message: '点击选择',
trigger: 'blur'
}],
field109: [{
required: true,
message: '请输入治商单位名称',
trigger: 'blur'
}],
field110: [],
field111: [{
required: true,
message: '请输入治商金额',
trigger: 'blur'
}],
field135: [],
field136: [],
field137: [],
field138: [],
field139: [],
field140: [],
field141: [],
field142: [],
field143: [],
},
field144Action: 'https://jsonplaceholder.typicode.com/posts/',
field144fileList: [],
field145Action: 'https://jsonplaceholder.typicode.com/posts/',
field145fileList: [],
field107Options: [{
"label": "选项一",
"value": 1
}, {
"label": "选项二",
"value": 2
}],
field108Options: [{
"label": "总价合同",
"value": 1
}, {
"label": "清单计价",
"value": 2
}],
field135Options: [{
"label": "设计变更",
"value": 1
}, {
"label": "现场变更",
"value": 2
}, {
"label": "补充协议",
"value": 3
}],
}
},
computed: {},
watch: {},
created() { },
mounted() { },
methods: {
submitForm() {
this.$refs['elForm'].validate(valid => {
if (!valid) return
// TODO
})
},
resetForm() {
this.$refs['elForm'].resetFields()
},
field144BeforeUpload(file) {
let isRightSize = file.size / 1024 / 1024 < 2
if (!isRightSize) {
this.$message.error('文件大小超过 2MB')
}
return isRightSize
},
field145BeforeUpload(file) {
let isRightSize = file.size / 1024 / 1024 < 2
if (!isRightSize) {
this.$message.error('文件大小超过 2MB')
}
return isRightSize
},
}
}
</script>
<style>
.el-upload__tip {
line-height: 1.2;
}
</style>

View File

@ -135,6 +135,10 @@
</el-form> </el-form>
</el-card> </el-card>
</div> </div>
</template> </template>
<script> <script>
@ -234,6 +238,8 @@
}], }],
field118: [], field118: [],
}, },
/* “我被叫到这里来,不会是因为加图索家是校董会成员吧?”恺撒看着昂热,“进入卡塞尔学院时,我就说过这是我的个人选择,和家族无关。”*/
field119Action: 'https://jsonplaceholder.typicode.com/posts/', field119Action: 'https://jsonplaceholder.typicode.com/posts/',
field119fileList: [], field119fileList: [],
field107Options: [{ field107Options: [{

View File

@ -0,0 +1,241 @@
<template>
<div>
<el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="120px" label-position="left">
<el-card>
<div class="tit">行政付款单</div>
<el-row :gutter="10">
<el-col :span="12">
<el-form-item label="合同编号" prop="field101">
<el-input v-model="formData.field101" placeholder="点击选择行政合同" :disabled='true' clearable
:style="{ width: '100%' }"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="合同名称" prop="field102">
<el-input v-model="formData.field102" placeholder="系统自动填写" :disabled='true' clearable
:style="{ width: '100%' }"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="供应商名称" prop="field103">
<el-input v-model="formData.field103" placeholder="系统自动填写" :disabled='true' clearable
:style="{ width: '100%' }"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="供应商编码" prop="field104">
<el-input v-model="formData.field104" placeholder="系统自动填写" :disabled='true' clearable
:style="{ width: '100%' }"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="申请人" prop="field105">
<el-input v-model="formData.field105" placeholder="请输入申请人" clearable :style="{ width: '100%' }">
</el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="申请日期" prop="field106">
<el-date-picker v-model="formData.field106" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
:style="{ width: '100%' }" placeholder="请选择申请日期" clearable></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="合同金额" prop="field107">
<el-input v-model="formData.field107" placeholder="系统自动填写" :disabled='true' clearable
:style="{ width: '100%' }"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="付款方式" prop="field109">
<el-select v-model="formData.field109" placeholder="请选择付款方式" clearable
:style="{ width: '100%' }">
<el-option v-for="(item, index) in field109Options" :key="index" :label="item.label"
:value="item.value" :disabled="item.disabled"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="合计已付款" prop="field110">
<el-input v-model="formData.field110" placeholder="系统自动填写" :disabled='true' clearable
:style="{ width: '100%' }"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="本次支付比例%" prop="field111">
<el-input v-model="formData.field111" placeholder="请输入" clearable :style="{ width: '100%' }">
</el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="本次支付金额" prop="field112">
<el-input v-model="formData.field112" placeholder="系统自动计算" clearable :style="{ width: '100%' }">
</el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="大写" prop="field113">
<el-input v-model="formData.field113" placeholder="系统自动计算" :disabled='true' clearable
:style="{ width: '100%' }"></el-input>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="备注" prop="field114">
<el-input v-model="formData.field114" placeholder="请输入备注" clearable :style="{ width: '100%' }">
</el-input>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="附件" prop="field115">
<el-upload ref="field115" :file-list="field115fileList" :action="field115Action"
:before-upload="field115BeforeUpload">
<el-button size="small" type="primary" icon="el-icon-upload">点击上传</el-button>
</el-upload>
</el-form-item>
</el-col>
</el-row>
</el-card>
<el-card>
<div class="tit">收款人信息</div>
<el-row>
<el-col :span="24">
<el-form-item label="开户银行" prop="field116">
<el-input v-model="formData.field116" placeholder="请输入开户银行" clearable
:style="{ width: '100%' }">
</el-input>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="开户名称" prop="field117">
<el-input v-model="formData.field117" placeholder="请输入开户名称" clearable
:style="{ width: '100%' }">
</el-input>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="账号" prop="field118">
<el-input v-model="formData.field118" placeholder="请输入账号" clearable :style="{ width: '100%' }">
</el-input>
</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-row>
</el-card>
</el-form>
</div>
</template>
<script>
export default {
components: {},
props: [],
data() {
return {
formData: {
field101: undefined,
field102: undefined,
field103: undefined,
field104: undefined,
field105: undefined,
field106: null,
field107: undefined,
field109: undefined,
field110: undefined,
field111: undefined,
field112: undefined,
field113: undefined,
field114: undefined,
field115: null,
field116: undefined,
field117: undefined,
field118: undefined,
},
rules: {
field101: [],
field102: [],
field103: [{
required: true,
message: '系统自动填写',
trigger: 'blur'
}],
field104: [{
required: true,
message: '系统自动填写',
trigger: 'blur'
}],
field105: [],
field106: [],
field107: [],
field109: [{
required: true,
message: '请选择付款方式',
trigger: 'change'
}],
field110: [{
required: true,
message: '系统自动填写',
trigger: 'blur'
}],
field111: [],
field112: [{
required: true,
message: '系统自动计算',
trigger: 'blur'
}],
field113: [],
field114: [],
field116: [],
field117: [],
field118: [],
},
field115Action: 'https://jsonplaceholder.typicode.com/posts/',
field115fileList: [],
field109Options: [{
"label": "选项一",
"value": 1
}, {
"label": "选项二",
"value": 2
}],
}
},
computed: {},
watch: {},
created() { },
mounted() { },
methods: {
submitForm() {
this.$refs['elForm'].validate(valid => {
if (!valid) return
// TODO
})
},
resetForm() {
this.$refs['elForm'].resetFields()
},
field115BeforeUpload(file) {
let isRightSize = file.size / 1024 / 1024 / 1024 < 2
if (!isRightSize) {
this.$message.error('文件大小超过 2GB')
}
return isRightSize
},
}
}
</script>
<style>
.el-upload__tip {
line-height: 1.2;
}
.tit {
font-size: 17px;
margin-bottom: 10px;
}
</style>

View File

@ -0,0 +1,250 @@
<template>
<div>
<el-card>
<el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="120px" label-position="left">
<el-row :gutter="10">
<el-col :span="12">
<el-form-item label="合同编号" prop="field101">
<el-input v-model="formData.field101" placeholder="点击选择行政合同" :disabled='true' clearable
:style="{ width: '100%' }"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="合同名称" prop="field102">
<el-input v-model="formData.field102" placeholder="系统自动填写" :disabled='true' clearable
:style="{ width: '100%' }"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="供应商名称" prop="field103">
<el-input v-model="formData.field103" placeholder="系统自动填写" :disabled='true' clearable
:style="{ width: '100%' }"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="供应商编码" prop="field104">
<el-input v-model="formData.field104" placeholder="系统自动填写" :disabled='true' clearable
:style="{ width: '100%' }"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="开票日期" prop="field105">
<el-date-picker v-model="formData.field105" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
:style="{ width: '100%' }" placeholder="请选择开票日期" clearable></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="提交人" prop="field106">
<el-input v-model="formData.field106" placeholder="请输入提交人" clearable :style="{ width: '100%' }">
</el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="发票类型" prop="field107">
<el-select v-model="formData.field107" placeholder="请选择发票类型" clearable
:style="{ width: '100%' }">
<el-option v-for="(item, index) in field107Options" :key="index" :label="item.label"
:value="item.value" :disabled="item.disabled"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="发票编号" prop="field108">
<el-input v-model="formData.field108" placeholder="请输入发票编号" clearable
:style="{ width: '100%' }">
</el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="发票金额" prop="field109">
<el-input v-model="formData.field109" placeholder="请输入发票金额" clearable
:style="{ width: '100%' }">
</el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="发票金额大写" prop="field110">
<el-input v-model="formData.field110" placeholder="系统自动转换" :disabled='true' clearable
:style="{ width: '100%' }"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="发票税率" prop="field111">
<el-select v-model="formData.field111" placeholder="请选择发票税率" clearable
:style="{ width: '100%' }">
<el-option v-for="(item, index) in field111Options" :key="index" :label="item.label"
:value="item.value" :disabled="item.disabled"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="税额" prop="field112">
<el-input v-model="formData.field112" placeholder="系统自动计算" :disabled='true' clearable
:style="{ width: '100%' }"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="不含税金额" prop="field114">
<el-input v-model="formData.field114" placeholder="系统自动计算" :disabled='true' clearable
:style="{ width: '100%' }"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="收票日期" prop="field115">
<el-date-picker v-model="formData.field115" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
:style="{ width: '100%' }" placeholder="请选择收票日期" clearable></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="备注" prop="field116">
<el-input v-model="formData.field116" placeholder="请输入备注" clearable :style="{ width: '100%' }">
</el-input>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="附件" prop="field117">
<el-upload ref="field117" :file-list="field117fileList" :action="field117Action"
:before-upload="field117BeforeUpload">
<el-button size="small" type="primary" icon="el-icon-upload">点击上传</el-button>
</el-upload>
</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-row>
</el-form>
</el-card>
</div>
</template>
<script>
export default {
components: {},
props: [],
data() {
return {
formData: {
field101: undefined,
field102: undefined,
field103: undefined,
field104: undefined,
field105: null,
field106: undefined,
field107: undefined,
field108: undefined,
field109: undefined,
field110: undefined,
field111: undefined,
field112: undefined,
field114: undefined,
field115: null,
field116: undefined,
field117: null,
},
rules: {
field101: [{
required: true,
message: '点击选择行政合同',
trigger: 'blur'
}],
field102: [],
field103: [{
required: true,
message: '系统自动填写',
trigger: 'blur'
}],
field104: [{
required: true,
message: '系统自动填写',
trigger: 'blur'
}],
field105: [],
field106: [],
field107: [],
field108: [],
field109: [{
required: true,
message: '请输入发票金额',
trigger: 'blur'
}],
field110: [],
field111: [],
field112: [],
field114: [],
field115: [{
required: true,
message: '请选择收票日期',
trigger: 'change'
}],
field116: [],
},
field117Action: 'https://jsonplaceholder.typicode.com/posts/',
field117fileList: [],
field107Options: [{
"label": "选项一",
"value": 1
}, {
"label": "选项二",
"value": 2
}],
field111Options: [{
"label": "选项一",
"value": 1
}, {
"label": "选项二",
"value": 2
}],
field112Options: [{
"label": "选项一",
"value": 1
}, {
"label": "选项二",
"value": 2
}],
field114Options: [{
"label": "选项一",
"value": 1
}, {
"label": "选项二",
"value": 2
}],
}
},
computed: {},
watch: {},
created() { },
mounted() { },
methods: {
submitForm() {
this.$refs['elForm'].validate(valid => {
if (!valid) return
// TODO
})
},
resetForm() {
this.$refs['elForm'].resetFields()
},
field117BeforeUpload(file) {
let isRightSize = file.size / 1024 / 1024 < 2
if (!isRightSize) {
this.$message.error('文件大小超过 2MB')
}
return isRightSize
},
}
}
</script>
<style>
.el-upload__tip {
line-height: 1.2;
}
</style>

View File

@ -0,0 +1,365 @@
<template>
<div>
<el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="120px" label-position="left">
<el-card>
<div class="tit">开票申请</div>
<el-row :gutter="10">
<el-col :span="12">
<el-form-item label="客户名称" prop="field101">
<el-input v-model="formData.field101" placeholder="点击选择客户" :disabled='true' clearable
:style="{ width: '100%' }"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="开票日期" prop="field102">
<el-date-picker v-model="formData.field102" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
:style="{ width: '100%' }" placeholder="请选择开票日期" clearable></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="合同编号" prop="field103">
<el-input v-model="formData.field103" placeholder="点击选择项目" :disabled='true' clearable
:style="{ width: '100%' }"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="合同名称" prop="field104">
<el-input v-model="formData.field104" :disabled='true' clearable :style="{ width: '100%' }">
</el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="合同金额" prop="field105">
<el-input v-model="formData.field105" :disabled='true' clearable :style="{ width: '100%' }">
</el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="期次" prop="field106">
<el-input v-model="formData.field106" placeholder="请输入期次" clearable :style="{ width: '100%' }">
</el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="累计开票金额" prop="field107">
<el-input v-model="formData.field107" :disabled='true' clearable :style="{ width: '100%' }">
</el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="累计回款金额" prop="field108">
<el-input v-model="formData.field108" :disabled='true' clearable :style="{ width: '100%' }">
</el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="税率" prop="field109">
<el-select v-model="formData.field109" placeholder="请选择税率" clearable :style="{ width: '100%' }">
<el-option v-for="(item, index) in field109Options" :key="index" :label="item.label" :value="item.value"
:disabled="item.disabled"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="发票类型" prop="field110">
<el-radio-group v-model="formData.field110" size="medium">
<el-radio v-for="(item, index) in field110Options" :key="index" :label="item.value"
:disabled="item.disabled">{{ item.label }}</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="开票金额(含税)" prop="field111">
<el-input v-model="formData.field111" placeholder="请输入开票金额(含税)" clearable
:style="{ width: '100%' }"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="金额大写" prop="field112">
<el-input v-model="formData.field112" placeholder="系统自动生成" :disabled='true' clearable
:style="{ width: '100%' }"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="开票金额(税额)" prop="field113">
<el-input v-model="formData.field113" placeholder="系统自动计算" :disabled='true' clearable
:style="{ width: '100%' }"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="开票金额(非税)" prop="field114">
<el-input v-model="formData.field114" placeholder="系统自动计算" :disabled='true' clearable
:style="{ width: '100%' }"></el-input>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="开票内容" prop="field115">
<el-input v-model="formData.field115" type="textarea" placeholder="请输入开票内容"
:autosize="{ minRows: 4, maxRows: 4 }" :style="{ width: '100%' }"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="发票编号" prop="field116">
<el-input v-model="formData.field116" placeholder="请输入发票编号" clearable :style="{ width: '100%' }">
</el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="备注" prop="field117">
<el-input v-model="formData.field117" placeholder="请输入备注" clearable :style="{ width: '100%' }">
</el-input>
</el-form-item>
</el-col>
<el-col :span="23">
<el-form-item label="附件" prop="field118">
<el-upload ref="field118" :file-list="field118fileList" :action="field118Action" :auto-upload="false"
:before-upload="field118BeforeUpload">
<el-button size="small" type="primary" icon="el-icon-upload">点击上传</el-button>
</el-upload>
</el-form-item>
</el-col>
</el-row>
</el-card>
<el-card>
<div class="tit">客户开票信息</div>
<el-row :gutter="10">
<el-col :span="23">
<el-form-item label="开票公司名称" prop="field119">
<el-input v-model="formData.field119" placeholder="请输入开票公司名称" clearable :style="{ width: '100%' }">
</el-input>
</el-form-item>
</el-col>
<el-col :span="23">
<el-form-item label="纳税人识别号" prop="field120">
<el-input v-model="formData.field120" placeholder="请输入纳税人识别号" clearable :style="{ width: '100%' }">
</el-input>
</el-form-item>
</el-col>
<el-col :span="23">
<el-form-item label="开户银行" prop="field121">
<el-input v-model="formData.field121" placeholder="请输入开户银行" clearable :style="{ width: '100%' }">
</el-input>
</el-form-item>
</el-col>
<el-col :span="23">
<el-form-item label="账号" prop="field122">
<el-input v-model="formData.field122" placeholder="请输入账号" clearable :style="{ width: '100%' }">
</el-input>
</el-form-item>
</el-col>
<el-col :span="23">
<el-form-item label="开户地址及电话" prop="field123">
<el-input v-model="formData.field123" placeholder="请输入开户地址及电话" clearable :style="{ width: '100%' }">
</el-input>
</el-form-item>
</el-col>
</el-row>
</el-card>
<el-card>
<div class="tit">发票邮寄信息</div>
<el-row :gutter="10">
<el-col :span="23">
<el-form-item label="收票地址" prop="field124">
<el-input v-model="formData.field124" placeholder="请输入收票地址" clearable :style="{ width: '100%' }">
</el-input>
</el-form-item>
</el-col>
<el-col :span="23">
<el-form-item label="联系人" prop="field125">
<el-input v-model="formData.field125" placeholder="请输入联系人" clearable :style="{ width: '100%' }">
</el-input>
</el-form-item>
</el-col>
<el-col :span="23">
<el-form-item label="联系电话" prop="field126">
<el-input v-model="formData.field126" placeholder="请输入联系电话" clearable :style="{ width: '100%' }">
</el-input>
</el-form-item>
</el-col>
<el-col :span="23">
<el-form-item label="邮寄时间" prop="field127">
<el-input v-model="formData.field127" placeholder="请输入邮寄时间" clearable :style="{ width: '100%' }">
</el-input>
</el-form-item>
</el-col>
<el-col :span="23">
<el-form-item label="邮寄方式" prop="field128">
<el-input v-model="formData.field128" placeholder="请输入邮寄方式" clearable :style="{ width: '100%' }">
</el-input>
</el-form-item>
</el-col>
<el-col :span="23">
<el-form-item label="邮寄单号" prop="field129">
<el-input v-model="formData.field129" placeholder="请输入邮寄单号" clearable :style="{ width: '100%' }">
</el-input>
</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-row>
</el-card>
</el-form>
</div>
</template>
<script>
export default {
components: {},
props: [],
data() {
return {
formData: {
field101: undefined,
field102: null,
field103: undefined,
field104: undefined,
field105: undefined,
field106: undefined,
field107: undefined,
field108: undefined,
field109: undefined,
field110: undefined,
field111: undefined,
field112: undefined,
field113: undefined,
field114: undefined,
field115: undefined,
field116: undefined,
field117: undefined,
field118: null,
field119: undefined,
field120: undefined,
field121: undefined,
field122: undefined,
field123: undefined,
field124: undefined,
field125: undefined,
field126: undefined,
field127: undefined,
field128: undefined,
field129: undefined,
},
rules: {
field101: [{
required: true,
message: '点击选择客户',
trigger: 'blur'
}],
field102: [],
field103: [{
required: true,
message: '点击选择项目',
trigger: 'blur'
}],
field104: [],
field105: [],
field106: [{
required: true,
message: '请输入期次',
trigger: 'blur'
}],
field107: [],
field108: [],
field109: [],
field110: [],
field111: [],
field112: [],
field113: [],
field114: [],
field115: [],
field116: [],
field117: [],
field119: [],
field120: [],
field121: [],
field122: [],
field123: [],
field124: [],
field125: [],
field126: [],
field127: [],
field128: [],
field129: [],
},
field118Action: 'https://jsonplaceholder.typicode.com/posts/',
field118fileList: [],
field109Options: [{
"label": "选项一",
"value": 1
}, {
"label": "选项二",
"value": 2
}],
field110Options: [{
"label": "专票",
"value": 1
}, {
"label": "普票",
"value": 2
}, {
"label": "收据",
"value": 3
}],
}
},
computed: {},
watch: {},
created() { },
mounted() { },
methods: {
submitForm() {
this.$refs['elForm'].validate(valid => {
if (!valid) return
// TODO
})
},
resetForm() {
this.$refs['elForm'].resetFields()
},
field118BeforeUpload(file) {
let isRightSize = file.size / 1024 / 1024 < 2
if (!isRightSize) {
this.$message.error('文件大小超过 2MB')
}
return isRightSize
},
submitUpload() {
this.$refs['field118'].submit()
},
}
}
</script>
<style>
.el-upload__tip {
line-height: 1.2;
}
.tit {
font-size: 17px;
margin-bottom: 10px;
}
</style>

View File

@ -0,0 +1,288 @@
<template>
<div>
<el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="120px" label-position="left">
<el-card>
<div class="tit">回款记录</div>
<el-row :gutter="10">
<el-col :span="12">
<el-form-item label="客户名称" prop="field101">
<el-input v-model="formData.field101" placeholder="点击选择客户" :disabled='true' clearable
:style="{ width: '100%' }"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="日期" prop="field102">
<el-date-picker v-model="formData.field102" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
:style="{ width: '100%' }" placeholder="请选择日期" clearable></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="合同编号" prop="field103">
<el-input v-model="formData.field103" placeholder="点击选择销售i/项目合同" :disabled='true' clearable
:style="{ width: '100%' }"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="合同名称" prop="field104">
<el-input v-model="formData.field104" :disabled='true' clearable :style="{ width: '100%' }">
</el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="期次" prop="field105">
<el-select v-model="formData.field105" placeholder="请选择期次" clearable :style="{ width: '100%' }">
<el-option v-for="(item, index) in field105Options" :key="index" :label="item.label"
:value="item.value" :disabled="item.disabled"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="收款性质" prop="field106">
<el-input v-model="formData.field106" placeholder="请输入收款性质" clearable
:style="{ width: '100%' }">
</el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="金额" prop="field107">
<el-input v-model="formData.field107" placeholder="请输入金额" clearable :style="{ width: '100%' }">
</el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="金额大写" prop="field108">
<el-input v-model="formData.field108" :disabled='true' clearable :style="{ width: '100%' }">
</el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="开票状态" prop="field109">
<el-input v-model="formData.field109" placeholder="请输入开票状态" clearable
:style="{ width: '100%' }">
</el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="付款方式" prop="field110">
<el-select v-model="formData.field110" placeholder="请选择付款方式" clearable
:style="{ width: '100%' }">
<el-option v-for="(item, index) in field110Options" :key="index" :label="item.label"
:value="item.value" :disabled="item.disabled"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="累计回数" prop="field111">
<el-input v-model="formData.field111" placeholder="系统自动填写" :disabled='true' clearable
:style="{ width: '100%' }"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="款项说明" prop="field112">
<el-input v-model="formData.field112" placeholder="请输入款项说明" clearable
:style="{ width: '100%' }">
</el-input>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="收款人" prop="field113">
<el-input v-model="formData.field113" placeholder="请输入收款人" clearable :style="{ width: '100%' }">
</el-input>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="备注" prop="field114">
<el-input v-model="formData.field114" placeholder="请输入备注" clearable :style="{ width: '100%' }">
</el-input>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="附件" prop="field115">
<el-upload ref="field115" :file-list="field115fileList" :action="field115Action"
:before-upload="field115BeforeUpload">
<el-button size="small" type="primary" icon="el-icon-upload">点击上传</el-button>
</el-upload>
</el-form-item>
</el-col>
</el-row>
</el-card>
<el-card>
<div class="tit">收款账户</div>
<el-row :gutter="10">
<el-col :span="24">
<el-form-item label="账户编码" prop="field116">
<el-input v-model="formData.field116" placeholder="点击选择收款账户" :disabled='true' clearable
:style="{ width: '100%' }"></el-input>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="开户银行" prop="field117">
<el-input v-model="formData.field117" placeholder="系统自动填写" :disabled='true' clearable
:style="{ width: '100%' }"></el-input>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="账号" prop="field118">
<el-input v-model="formData.field118" placeholder="系统自动填写" :disabled='true' clearable
:style="{ width: '100%' }"></el-input>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="是否计息" prop="field119">
<el-radio-group v-model="formData.field119" size="medium">
<el-radio v-for="(item, index) in field119Options" :key="index" :label="item.value"
:disabled="item.disabled">{{ item.label }}</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="开始计息日期" prop="field120">
<el-time-picker v-model="formData.field120" format="HH:mm:ss" value-format="HH:mm:ss"
:picker-options='{ "selectableRange": "00:00:00-23:59:59" }' :style="{ width: '100%' }"
placeholder="请选择开始计息日期" clearable></el-time-picker>
</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-row>
</el-card>
</el-form>
</div>
</template>
<script>
export default {
components: {},
props: [],
data() {
return {
formData: {
field101: undefined,
field102: null,
field103: undefined,
field104: undefined,
field105: undefined,
field106: undefined,
field107: undefined,
field108: undefined,
field109: undefined,
field110: undefined,
field111: undefined,
field112: undefined,
field113: undefined,
field114: undefined,
field115: null,
field116: undefined,
field117: undefined,
field118: undefined,
field119: undefined,
field120: null,
},
rules: {
field101: [{
required: true,
message: '点击选择客户',
trigger: 'blur'
}],
field102: [],
field103: [{
required: true,
message: '点击选择销售i/项目合同',
trigger: 'blur'
}],
field104: [],
field105: [],
field106: [],
field107: [{
required: true,
message: '请输入金额',
trigger: 'blur'
}],
field108: [],
field109: [],
field110: [{
required: true,
message: '请选择付款方式',
trigger: 'change'
}],
field111: [],
field112: [],
field113: [],
field114: [],
field116: [{
required: true,
message: '点击选择收款账户',
trigger: 'blur'
}],
field117: [],
field118: [],
field119: [],
field120: [],
},
field115Action: 'https://jsonplaceholder.typicode.com/posts/',
field115fileList: [],
field105Options: [{
"label": "选项一",
"value": 1
}, {
"label": "选项二",
"value": 2
}],
field110Options: [{
"label": "选项一",
"value": 1
}, {
"label": "选项二",
"value": 2
}],
field119Options: [{
"label": "是",
"value": 1
}, {
"label": "否",
"value": 2
}],
}
},
computed: {},
watch: {},
created() { },
mounted() { },
methods: {
submitForm() {
this.$refs['elForm'].validate(valid => {
if (!valid) return
// TODO
})
},
resetForm() {
this.$refs['elForm'].resetFields()
},
field115BeforeUpload(file) {
let isRightSize = file.size / 1024 / 1024 < 2
if (!isRightSize) {
this.$message.error('文件大小超过 2MB')
}
return isRightSize
},
}
}
</script>
<style>
.el-upload__tip {
line-height: 1.2;
}
.tit {
font-size: 17px;
margin-bottom: 10px;
}
</style>

View File

@ -0,0 +1,159 @@
<template>
<div>
<el-card>
<el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="120px" label-position="left">
<el-form-item label="客户名称" prop="field101">
<el-input v-model="formData.field101" placeholder="点击选择客户" :disabled='true' clearable
:style="{ width: '100%' }"></el-input>
</el-form-item>
<el-form-item label="合同编号" prop="field102">
<el-input v-model="formData.field102" placeholder="点击选择户销售合同" :disabled='true' clearable
:style="{ width: '100%' }"></el-input>
</el-form-item>
<el-form-item label="合同名称" prop="field103">
<el-input v-model="formData.field103" placeholder="系统自动填写" :disabled='true' clearable
:style="{ width: '100%' }"></el-input>
</el-form-item>
<el-form-item label="期次" prop="field106">
<el-select v-model="formData.field106" placeholder="请选择期次" clearable :style="{ width: '100%' }">
<el-option v-for="(item, index) in field106Options" :key="index" :label="item.label"
:value="item.value" :disabled="item.disabled"></el-option>
</el-select>
</el-form-item>
<el-form-item label="计划回款日期" prop="field107">
<el-date-picker v-model="formData.field107" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
:style="{ width: '100%' }" placeholder="请选择计划回款日期" clearable></el-date-picker>
</el-form-item>
<el-form-item label="金额" prop="field108">
<el-input v-model="formData.field108" placeholder="请输入金额" clearable :style="{ width: '100%' }">
</el-input>
</el-form-item>
<el-form-item label="是否回款" prop="field109">
<el-radio-group v-model="formData.field109" size="medium">
<el-radio v-for="(item, index) in field109Options" :key="index" :label="item.value"
:disabled="item.disabled">{{ item.label }}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="回款责任人" prop="field110">
<el-input v-model="formData.field110" placeholder="点击指定责任人" :disabled='true' clearable
:style="{ width: '100%' }"></el-input>
</el-form-item>
<el-form-item label="备注" prop="field111">
<el-input v-model="formData.field111" placeholder="请输入备注" clearable :style="{ width: '100%' }">
</el-input>
</el-form-item>
<el-form-item label="附件" prop="field112">
<el-upload ref="field112" :file-list="field112fileList" :action="field112Action"
:before-upload="field112BeforeUpload">
<el-button size="small" type="primary" icon="el-icon-upload">点击上传</el-button>
</el-upload>
</el-form-item>
<el-form-item size="large">
<el-button type="primary" @click="submitForm">提交</el-button>
<el-button @click="resetForm">重置</el-button>
</el-form-item>
</el-form>
</el-card>
</div>
</template>
<script>
export default {
components: {},
props: [],
data() {
return {
formData: {
field101: undefined,
field102: undefined,
field103: undefined,
field106: undefined,
field107: null,
field108: undefined,
field109: 1,
field110: undefined,
field111: undefined,
field112: null,
},
rules: {
field101: [{
required: true,
message: '点击选择客户',
trigger: 'blur'
}],
field102: [{
required: true,
message: '点击选择户销售合同',
trigger: 'blur'
}],
field103: [],
field106: [{
required: true,
message: '请选择期次',
trigger: 'change'
}],
field107: [{
required: true,
message: '请选择计划回款日期',
trigger: 'change'
}],
field108: [{
required: true,
message: '请输入金额',
trigger: 'blur'
}],
field109: [],
field110: [],
field111: [],
},
field112Action: 'https://jsonplaceholder.typicode.com/posts/',
field112fileList: [],
field106Options: [{
"label": "选项一",
"value": 1
}, {
"label": "选项二",
"value": 2
}],
field109Options: [{
"label": "已回",
"value": 1
}, {
"label": "未回",
"value": 2
}, {
"label": "部分",
"value": 3
}],
}
},
computed: {},
watch: {},
created() { },
mounted() { },
methods: {
submitForm() {
this.$refs['elForm'].validate(valid => {
if (!valid) return
// TODO
})
},
resetForm() {
this.$refs['elForm'].resetFields()
},
field112BeforeUpload(file) {
let isRightSize = file.size / 1024 / 1024 < 2
if (!isRightSize) {
this.$message.error('文件大小超过 2MB')
}
return isRightSize
},
}
}
</script>
<style>
.el-upload__tip {
line-height: 1.2;
}
</style>

View File

@ -0,0 +1,206 @@
<template>
<div>
<el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="120px" label-position="left">
<el-card>
<div class="tit">退款申请</div>
<el-row :gutter="10">
<el-col :span="12">
<el-form-item label="客户名称" prop="field101">
<el-input v-model="formData.field101" placeholder="点击选择客户" :disabled='true' clearable
:style="{ width: '100%' }"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="退款日期" prop="field102">
<el-date-picker v-model="formData.field102" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
:style="{ width: '100%' }" placeholder="请选择退款日期" clearable></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="合同编号" prop="field103">
<el-input v-model="formData.field103" placeholder="点击选择销售/项目合同" :disabled='true' clearable
:style="{ width: '100%' }"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="合同名称" prop="field104">
<el-input v-model="formData.field104" placeholder="系统自动填写" :disabled='true' clearable
:style="{ width: '100%' }"></el-input>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="退款原因" prop="field105">
<el-input v-model="formData.field105" type="textarea" placeholder="请输入退款原因"
:autosize="{ minRows: 4, maxRows: 4 }" :style="{ width: '100%' }"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="退款金额" prop="field106">
<el-input v-model="formData.field106" placeholder="请输入退款金额" clearable
:style="{ width: '100%' }">
</el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="金额大写" prop="field107">
<el-input v-model="formData.field107" :disabled='true' clearable :style="{ width: '100%' }">
</el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="退款方式" prop="field108">
<el-select v-model="formData.field108" placeholder="请选择退款方式" clearable
:style="{ width: '100%' }">
<el-option v-for="(item, index) in field108Options" :key="index" :label="item.label"
:value="item.value" :disabled="item.disabled"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="退款人" prop="field109">
<el-input v-model="formData.field109" :disabled='true' clearable :style="{ width: '100%' }">
</el-input>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="备注" prop="field110">
<el-input v-model="formData.field110" placeholder="请输入备注" clearable :style="{ width: '100%' }">
</el-input>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="附件" prop="field111">
<el-upload ref="field111" :file-list="field111fileList" :before-upload="field111BeforeUpload"
accept=".pdf">
<el-button size="small" type="primary" icon="el-icon-upload">点击上传</el-button>
</el-upload>
</el-form-item>
</el-col>
</el-row>
</el-card>
<el-card>
<div class="tit">客户收款信息</div>
<el-row>
<el-col :span="24">
<el-form-item label="收款银行" prop="field112">
<el-input v-model="formData.field112" placeholder="请输入收款银行" clearable
:style="{ width: '100%' }">
</el-input>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="收款账号" prop="field113">
<el-input v-model="formData.field113" placeholder="请输入收款账号" clearable
:style="{ width: '100%' }">
</el-input>
</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-row>
</el-card>
</el-form>
</div>
</template>
<script>
export default {
components: {},
props: [],
data() {
return {
formData: {
field101: undefined,
field102: null,
field103: undefined,
field104: undefined,
field105: undefined,
field106: undefined,
field107: undefined,
field108: undefined,
field109: undefined,
field110: undefined,
field111: null,
field112: undefined,
field113: undefined,
},
rules: {
field101: [{
required: true,
message: '点击选择客户',
trigger: 'blur'
}],
field102: [],
field103: [{
required: true,
message: '点击选择销售/项目合同',
trigger: 'blur'
}],
field104: [],
field105: [{
required: true,
message: '请输入退款原因',
trigger: 'blur'
}],
field106: [{
required: true,
message: '请输入退款金额',
trigger: 'blur'
}],
field107: [],
field108: [],
field109: [],
field110: [],
field112: [{
required: true,
message: '请输入收款银行',
trigger: 'blur'
}],
field113: [{
required: true,
message: '请输入收款账号',
trigger: 'blur'
}],
},
field108Options: [{
"label": "选项一",
"value": 1
}, {
"label": "选项二",
"value": 2
}],
}
},
computed: {},
watch: {},
created() { },
mounted() { },
methods: {
submitForm() {
this.$refs['elForm'].validate(valid => {
if (!valid) return
// TODO
})
},
resetForm() {
this.$refs['elForm'].resetFields()
},
}
}
</script>
<style>
.el-upload__tip {
line-height: 1.2;
}
.tit {
font-size: 17px;
margin-bottom: 10px;
}
</style>

View File

@ -0,0 +1 @@
<!-- 管理费用 -->

View File

@ -0,0 +1 @@
银行账户

View File

@ -0,0 +1,212 @@
<template>
<div>
<el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="120px" label-position="left">
<el-card>
<div class="tit">投标保证金申请</div>
<el-row :gutter="10">
<el-col :span="12">
<el-form-item label="投标编号" prop="field101">
<el-input v-model="formData.field101" placeholder="点击选择投标决策" :disabled='true' clearable
:style="{ width: '100%' }"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="申请人" prop="field102">
<el-input v-model="formData.field102" placeholder="请输入申请人" clearable :style="{ width: '100%' }">
</el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="客户名称" prop="field103">
<el-input v-model="formData.field103" placeholder="系统自动填写" :disabled='true' clearable
:style="{ width: '100%' }"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="付款方式" prop="field104">
<el-input v-model="formData.field104" placeholder="请输入付款方式" clearable :style="{ width: '100%' }">
</el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="项目名称" prop="field105">
<el-input v-model="formData.field105" placeholder="系统自动填写" :disabled='true' clearable
:style="{ width: '100%' }"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="项目编码" prop="field106">
<el-input v-model="formData.field106" placeholder="系统自动填写" :disabled='true' clearable
:style="{ width: '100%' }"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="保证金金额" prop="field107">
<el-input v-model="formData.field107" placeholder="系统自动填写" :disabled='true' clearable
:style="{ width: '100%' }"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="大写" prop="field108">
<el-input v-model="formData.field108" placeholder="系统自动填写" :disabled='true' clearable
:style="{ width: '100%' }"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="投标时间" prop="field109">
<el-date-picker v-model="formData.field109" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
:style="{ width: '100%' }" placeholder="系统自动填写" clearable :disabled='true'></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="预计退还时间" prop="field110">
<el-date-picker v-model="formData.field110" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
:style="{ width: '100%' }" placeholder="请选择预计退还时间" clearable></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="备注" prop="field111">
<el-input v-model="formData.field111" type="textarea" placeholder="请输入备注"
:autosize="{ minRows: 4, maxRows: 4 }" :style="{ width: '100%' }"></el-input>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="附件" prop="field112">
<el-upload ref="field112" :file-list="field112fileList" :action="field112Action"
:before-upload="field112BeforeUpload">
<el-button size="small" type="primary" icon="el-icon-upload">点击上传</el-button>
</el-upload>
</el-form-item>
</el-col>
</el-row>
</el-card>
<el-card>
<div class="tit">收款人信息</div>
<el-row>
<el-col :span="24">
<el-form-item label="开户银行" prop="field113">
<el-input v-model="formData.field113" placeholder="请输入开户银行" clearable :style="{ width: '100%' }">
</el-input>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="开户名称" prop="field114">
<el-input v-model="formData.field114" placeholder="请输入开户名称" clearable :style="{ width: '100%' }">
</el-input>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="账号" prop="field115">
<el-input v-model="formData.field115" placeholder="请输入账号" clearable :style="{ width: '100%' }">
</el-input>
</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-row>
</el-card>
</el-form>
</div>
</template>
<script>
export default {
components: {},
props: [],
data() {
return {
formData: {
field101: undefined,
field102: undefined,
field103: undefined,
field104: undefined,
field105: undefined,
field106: undefined,
field107: undefined,
field108: undefined,
field109: null,
field110: null,
field111: undefined,
field112: null,
field113: undefined,
field114: undefined,
field115: undefined,
},
rules: {
field101: [{
required: true,
message: '点击选择投标决策',
trigger: 'blur'
}],
field102: [],
field103: [],
field104: [],
field105: [],
field106: [],
field107: [],
field108: [],
field109: [],
field110: [],
field111: [],
field113: [{
required: true,
message: '请输入开户银行',
trigger: 'blur'
}],
field114: [{
required: true,
message: '请输入开户名称',
trigger: 'blur'
}],
field115: [{
required: true,
message: '请输入账号',
trigger: 'blur'
}],
},
field112Action: 'https://jsonplaceholder.typicode.com/posts/',
field112fileList: [],
}
},
computed: {},
watch: {},
created() { },
mounted() { },
methods: {
submitForm() {
this.$refs['elForm'].validate(valid => {
if (!valid) return
// TODO
})
},
resetForm() {
this.$refs['elForm'].resetFields()
},
field112BeforeUpload(file) {
let isRightSize = file.size / 1024 / 1024 < 2
if (!isRightSize) {
this.$message.error('文件大小超过 2MB')
}
return isRightSize
},
}
}
</script>
<style>
.el-upload__tip {
line-height: 1.2;
}
.tit {
font-size: 17px;
margin-bottom: 10px;
}
</style>

View File

@ -0,0 +1,181 @@
<template>
<div>
<el-card>
<el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="120px" label-position="left">
<el-form-item label="投标编号" prop="field101">
<el-input v-model="formData.field101" placeholder="点击选择投标报保证金" :disabled='true' clearable
:style="{ width: '100%' }"></el-input>
</el-form-item>
<el-form-item label="客户名称" prop="field102">
<el-input v-model="formData.field102" placeholder="系统自动填写" :disabled='true' clearable
:style="{ width: '100%' }"></el-input>
</el-form-item>
<el-form-item label="项目名称" prop="field103">
<el-input v-model="formData.field103" placeholder="系统自动填写" :disabled='true' clearable
:style="{ width: '100%' }"></el-input>
</el-form-item>
<el-form-item label="项目编码" prop="field104">
<el-input v-model="formData.field104" placeholder="系统自动填写" :disabled='true' clearable
:style="{ width: '100%' }"></el-input>
</el-form-item>
<el-form-item label="投标时间" prop="field105">
<el-time-picker v-model="formData.field105" format="HH:mm:ss" value-format="HH:mm:ss"
:picker-options='{ "selectableRange": "00:00:00-23:59:59" }' :style="{ width: '100%' }"
placeholder="系统自动填写" clearable :disabled='true'></el-time-picker>
</el-form-item>
<el-form-item label="退款金额" prop="field106">
<el-input v-model="formData.field106" placeholder="系统自动填写" clearable :style="{ width: '100%' }">
</el-input>
</el-form-item>
<el-form-item label="退款金额大写" prop="field107">
<el-input v-model="formData.field107" placeholder="系统自动填写" :disabled='true' clearable
:style="{ width: '100%' }"></el-input>
</el-form-item>
<el-form-item label="退款日期" prop="field108">
<el-date-picker v-model="formData.field108" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
:style="{ width: '100%' }" clearable></el-date-picker>
</el-form-item>
<el-form-item label="备注" prop="field110">
<el-input v-model="formData.field110" type="textarea" placeholder="请输入备注"
:autosize="{ minRows: 4, maxRows: 4 }" :style="{ width: '100%' }"></el-input>
</el-form-item>
<el-form-item label="附件" prop="field111">
<el-upload ref="field111" :file-list="field111fileList" :action="field111Action"
:before-upload="field111BeforeUpload">
<el-button size="small" type="primary" icon="el-icon-upload">点击上传</el-button>
</el-upload>
</el-form-item>
<el-form-item label="账户编码" prop="field112">
<el-input v-model="formData.field112" placeholder="点击选择账号" :disabled='true' clearable
:style="{ width: '100%' }"></el-input>
</el-form-item>
<el-form-item label="开户银行" prop="field113">
<el-input v-model="formData.field113" placeholder="系统自动填写" :disabled='true' clearable
:style="{ width: '100%' }"></el-input>
</el-form-item>
<el-form-item label="开户名称" prop="field114">
<el-input v-model="formData.field114" placeholder="系统自动填写" :disabled='true' clearable
:style="{ width: '100%' }"></el-input>
</el-form-item>
<el-form-item label="账号" prop="field115">
<el-input v-model="formData.field115" placeholder="系统自动填写" :disabled='true' clearable
:style="{ width: '100%' }"></el-input>
</el-form-item>
<el-form-item label="是否计意" prop="field116">
<el-radio-group v-model="formData.field116" size="medium">
<el-radio v-for="(item, index) in field116Options" :key="index" :label="item.value"
:disabled="item.disabled">{{ item.label }}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="开始计意日期" prop="field117">
<el-date-picker v-model="formData.field117" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
:style="{ width: '100%' }" placeholder="请选择开始计意日期" clearable></el-date-picker>
</el-form-item>
<el-form-item size="large">
<el-button type="primary" @click="submitForm">提交</el-button>
<el-button @click="resetForm">重置</el-button>
</el-form-item>
</el-form>
</el-card>
</div>
</template>
<script>
export default {
components: {},
props: [],
data() {
return {
formData: {
field101: undefined,
field102: undefined,
field103: undefined,
field104: undefined,
field105: null,
field106: undefined,
field107: undefined,
field108: undefined,
field110: undefined,
field111: null,
field112: undefined,
field113: undefined,
field114: undefined,
field115: undefined,
field116: undefined,
field117: null,
},
rules: {
field101: [{
required: true,
message: '点击选择投标报保证金',
trigger: 'blur'
}],
field102: [],
field103: [],
field104: [],
field105: [],
field106: [{
required: true,
message: '系统自动填写',
trigger: 'blur'
}],
field107: [],
field108: [{
required: true,
message: '',
trigger: 'change'
}],
field110: [],
field112: [{
required: true,
message: '点击选择账号',
trigger: 'blur'
}],
field113: [],
field114: [],
field115: [],
field116: [],
field117: [],
},
field111Action: 'https://jsonplaceholder.typicode.com/posts/',
field111fileList: [],
field116Options: [{
"label": "是",
"value": 1
}, {
"label": "否",
"value": 2
}],
}
},
computed: {},
watch: {},
created() { },
mounted() { },
methods: {
submitForm() {
this.$refs['elForm'].validate(valid => {
if (!valid) return
// TODO
})
},
resetForm() {
this.$refs['elForm'].resetFields()
},
field111BeforeUpload(file) {
let isRightSize = file.size / 1024 / 1024 < 2
if (!isRightSize) {
this.$message.error('文件大小超过 2MB')
}
return isRightSize
},
}
}
</script>
<style>
.el-upload__tip {
line-height: 1.2;
}
</style>

View File

@ -0,0 +1 @@
汇票管理

View File

@ -0,0 +1,253 @@
<template>
<div>
<el-card>
<el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="120px" label-position="left">
<el-row :gutter="10">
<el-col :span="12">
<el-form-item label="供应商名称" prop="field101">
<el-input v-model="formData.field101" placeholder="点击选择供应商" :disabled='true' clearable
:style="{ width: '100%' }"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="供应商编码" prop="field102">
<el-input v-model="formData.field102" placeholder="系统自动填写" :disabled='true' clearable
:style="{ width: '100%' }"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="合同编号" prop="field103">
<el-input v-model="formData.field103" placeholder="点击选择采购/分包合同" :disabled='true' clearable
:style="{ width: '100%' }"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="合同名称" prop="field104">
<el-input v-model="formData.field104" placeholder="系统自动填写" :disabled='true' clearable
:style="{ width: '100%' }"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="项目名称" prop="field105">
<el-input v-model="formData.field105" placeholder="系统自动填写" :disabled='true' clearable
:style="{ width: '100%' }"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="项目编码" prop="field106">
<el-input v-model="formData.field106" placeholder="系统自动填写" :disabled='true' clearable
:style="{ width: '100%' }"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="开票日期" prop="field107">
<el-date-picker v-model="formData.field107" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
:style="{ width: '100%' }" placeholder="请选择开票日期" clearable></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="提交人" prop="field108">
<el-input v-model="formData.field108" placeholder="请输入提交人" clearable :style="{ width: '100%' }">
</el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="发票类型" prop="field109">
<el-select v-model="formData.field109" placeholder="请选择发票类型" clearable
:style="{ width: '100%' }">
<el-option v-for="(item, index) in field109Options" :key="index" :label="item.label"
:value="item.value" :disabled="item.disabled"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="发票编号" prop="field110">
<el-input v-model="formData.field110" clearable :style="{ width: '100%' }"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="发票金额" prop="field111">
<el-input v-model="formData.field111" placeholder="请输入发票金额" clearable
:style="{ width: '100%' }">
</el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="发票金额大写" prop="field112">
<el-input v-model="formData.field112" placeholder="系统自动转化" :disabled='true' clearable
:style="{ width: '100%' }"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="发票税率" prop="field113">
<el-select v-model="formData.field113" placeholder="请选择发票税率" clearable
:style="{ width: '100%' }">
<el-option v-for="(item, index) in field113Options" :key="index" :label="item.label"
:value="item.value" :disabled="item.disabled"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="税额" prop="field114">
<el-input v-model="formData.field114" :disabled='true' clearable :style="{ width: '100%' }">
</el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="不含税金额" prop="field115">
<el-input v-model="formData.field115" :disabled='true' clearable :style="{ width: '100%' }">
</el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="收票日期" prop="field116">
<el-date-picker v-model="formData.field116" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
:style="{ width: '100%' }" placeholder="请选择收票日期" clearable></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="备注" prop="field117">
<el-input v-model="formData.field117" type="textarea" placeholder="请输入备注"
:autosize="{ minRows: 4, maxRows: 4 }" :style="{ width: '100%' }"></el-input>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="附件" prop="field118">
<el-upload ref="field118" :file-list="field118fileList" :action="field118Action"
:before-upload="field118BeforeUpload">
<el-button size="small" type="primary" icon="el-icon-upload">点击上传</el-button>
</el-upload>
</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-row>
</el-form>
</el-card>
</div>
</template>
<script>
export default {
components: {},
props: [],
data() {
return {
formData: {
field101: undefined,
field102: undefined,
field103: undefined,
field104: undefined,
field105: undefined,
field106: undefined,
field107: null,
field108: undefined,
field109: undefined,
field110: undefined,
field111: undefined,
field112: undefined,
field113: undefined,
field114: undefined,
field115: undefined,
field116: null,
field117: undefined,
field118: null,
},
rules: {
field101: [{
required: true,
message: '点击选择供应商',
trigger: 'blur'
}],
field102: [],
field103: [],
field104: [],
field105: [],
field106: [],
field107: [],
field108: [],
field109: [{
required: true,
message: '请选择发票类型',
trigger: 'change'
}],
field110: [],
field111: [{
required: true,
message: '请输入发票金额',
trigger: 'blur'
}],
field112: [],
field113: [],
field114: [{
required: true,
message: '',
trigger: 'blur'
}],
field115: [{
required: true,
message: '',
trigger: 'blur'
}],
field116: [{
required: true,
message: '请选择收票日期',
trigger: 'change'
}],
field117: [],
},
field118Action: 'https://jsonplaceholder.typicode.com/posts/',
field118fileList: [],
field109Options: [{
"label": "选项一",
"value": 1
}, {
"label": "选项二",
"value": 2
}],
field113Options: [{
"label": "选项一",
"value": 1
}, {
"label": "选项二",
"value": 2
}],
}
},
computed: {},
watch: {},
created() { },
mounted() { },
methods: {
submitForm() {
this.$refs['elForm'].validate(valid => {
if (!valid) return
// TODO
})
},
resetForm() {
this.$refs['elForm'].resetFields()
},
field118BeforeUpload(file) {
let isRightSize = file.size / 1024 / 1024 < 2
if (!isRightSize) {
this.$message.error('文件大小超过 2MB')
}
return isRightSize
},
}
}
</script>
<style>
.el-upload__tip {
line-height: 1.2;
}
</style>

View File

@ -0,0 +1,154 @@
<template>
<div>
<el-card>
<el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="120px" label-position="left">
<el-form-item label="供应商名称" prop="field101">
<el-input v-model="formData.field101" placeholder="点击选择供应商" :disabled='true' clearable
:style="{ width: '100%' }"></el-input>
</el-form-item>
<el-form-item label="供应编码" prop="field102">
<el-input v-model="formData.field102" placeholder="系统自动填写" :disabled='true' clearable
:style="{ width: '100%' }"></el-input>
</el-form-item>
<el-form-item label="合同编码" prop="field103">
<el-input v-model="formData.field103" placeholder="点击选择采购/分包合同" :disabled='true' clearable
:style="{ width: '100%' }"></el-input>
</el-form-item>
<el-form-item label="项目名称" prop="field104">
<el-input v-model="formData.field104" placeholder="系统自动填写" :disabled='true' clearable
:style="{ width: '100%' }"></el-input>
</el-form-item>
<el-form-item label="项目编码" prop="field105">
<el-input v-model="formData.field105" placeholder="系统自动填写" :disabled='true' clearable
:style="{ width: '100%' }"></el-input>
</el-form-item>
<el-form-item label="期次" prop="field106">
<el-input v-model="formData.field106" placeholder="请输入期次" clearable :style="{ width: '100%' }">
</el-input>
</el-form-item>
<el-form-item label="计划付款日期" prop="field107">
<el-date-picker v-model="formData.field107" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
:style="{ width: '100%' }" placeholder="请选择计划付款日期" clearable></el-date-picker>
</el-form-item>
<el-form-item label="金额" prop="field108">
<el-input v-model="formData.field108" placeholder="请输入金额" clearable :style="{ width: '100%' }">
</el-input>
</el-form-item>
<el-form-item label="外币备注" prop="field109">
<el-input v-model="formData.field109" placeholder="请输入" clearable :style="{ width: '100%' }"></el-input>
</el-form-item>
<el-form-item label="状态" prop="field110">
<el-radio-group v-model="formData.field110" size="medium">
<el-radio v-for="(item, index) in field110Options" :key="index" :label="item.value"
:disabled="item.disabled">{{ item.label }}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="备注" prop="field111">
<el-input v-model="formData.field111" placeholder="请输入备注" clearable :style="{ width: '100%' }">
</el-input>
</el-form-item>
<el-form-item label="附件" prop="field112">
<el-upload ref="field112" :file-list="field112fileList" :action="field112Action"
:before-upload="field112BeforeUpload">
<el-button size="small" type="primary" icon="el-icon-upload">点击上传</el-button>
</el-upload>
</el-form-item>
<el-form-item size="large">
<el-button type="primary" @click="submitForm">提交</el-button>
<el-button @click="resetForm">重置</el-button>
</el-form-item>
</el-form>
</el-card>
</div>
</template>
<script>
export default {
components: {},
props: [],
data() {
return {
formData: {
field101: undefined,
field102: undefined,
field103: undefined,
field104: undefined,
field105: undefined,
field106: undefined,
field107: null,
field108: undefined,
field109: undefined,
field110: undefined,
field111: undefined,
field112: null,
},
rules: {
field101: [{
required: true,
message: '点击选择供应商',
trigger: 'blur'
}],
field102: [],
field103: [{
required: true,
message: '点击选择采购/分包合同',
trigger: 'blur'
}],
field104: [],
field105: [],
field106: [],
field107: [],
field108: [{
required: true,
message: '请输入金额',
trigger: 'blur'
}],
field109: [],
field110: [],
field111: [],
},
field112Action: 'https://jsonplaceholder.typicode.com/posts/',
field112fileList: [],
field110Options: [{
"label": "未付",
"value": 1
}, {
"label": "部分",
"value": 2
}, {
"label": "已付",
"value": 3
}],
}
},
computed: {},
watch: {},
created() { },
mounted() { },
methods: {
submitForm() {
this.$refs['elForm'].validate(valid => {
if (!valid) return
// TODO
})
},
resetForm() {
this.$refs['elForm'].resetFields()
},
field112BeforeUpload(file) {
let isRightSize = file.size / 1024 / 1024 < 2
if (!isRightSize) {
this.$message.error('文件大小超过 2MB')
}
return isRightSize
},
}
}
</script>
<style>
.el-upload__tip {
line-height: 1.2;
}
</style>

View File

@ -0,0 +1,347 @@
<template>
<div>
<el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="120px" label-position="left">
<el-card>
<div class="tit">付款申请</div>
<el-row :gutter="10">
<el-col :span="12">
<el-form-item label="供应商名称" prop="field101">
<el-input v-model="formData.field101" placeholder="点击选择供应商" :disabled='true' clearable
:style="{ width: '100%' }"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="供应商编码" prop="field102">
<el-input v-model="formData.field102" placeholder="系统自动填写" :disabled='true' clearable
:style="{ width: '100%' }"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="合同编号" prop="field103">
<el-input v-model="formData.field103" placeholder="点击选择采购/分包合同" :disabled='true' clearable
:style="{ width: '100%' }"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="合同名称" prop="field104">
<el-input v-model="formData.field104" placeholder="系统自动填写" :disabled='true' clearable
:style="{ width: '100%' }"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="项目名称" prop="field105">
<el-input v-model="formData.field105" placeholder="系统自动填写" :disabled='true' clearable
:style="{ width: '100%' }"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="项目编码" prop="field106">
<el-input v-model="formData.field106" placeholder="系统自动填写" :disabled='true' clearable
:style="{ width: '100%' }"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="合同金额" prop="field107">
<el-input v-model="formData.field107" placeholder="系统自动填写" :disabled='true' clearable
:style="{ width: '100%' }"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="累计已支付" prop="field108">
<el-input v-model="formData.field108" placeholder="系统自动填写" :disabled='true' clearable
:style="{ width: '100%' }"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="付款日期" prop="field109">
<el-date-picker v-model="formData.field109" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
:style="{ width: '100%' }" placeholder="请选择付款日期" clearable></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="累计已开票" prop="field110">
<el-input v-model="formData.field110" placeholder="系统自动填写" :disabled='true' clearable
:style="{ width: '100%' }"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="期次" prop="field111">
<el-select v-model="formData.field111" placeholder="请选择期次" clearable :style="{ width: '100%' }">
<el-option v-for="(item, index) in field111Options" :key="index" :label="item.label"
:value="item.value" :disabled="item.disabled"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="付款计划" prop="field112">
<el-select v-model="formData.field112" placeholder="请选择付款计划" clearable
:style="{ width: '100%' }">
<el-option v-for="(item, index) in field112Options" :key="index" :label="item.label"
:value="item.value" :disabled="item.disabled"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="付款性质" prop="field113">
<el-select v-model="formData.field113" placeholder="请选择付款性质" clearable
:style="{ width: '100%' }">
<el-option v-for="(item, index) in field113Options" :key="index" :label="item.label"
:value="item.value" :disabled="item.disabled"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="付款方式" prop="field114">
<el-select v-model="formData.field114" placeholder="请选择付款方式" clearable
:style="{ width: '100%' }">
<el-option v-for="(item, index) in field114Options" :key="index" :label="item.label"
:value="item.value" :disabled="item.disabled"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="申请人" prop="field115">
<el-input v-model="formData.field115" placeholder="请输入申请人" clearable :style="{ width: '100%' }">
</el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="开票状态" prop="field116">
<el-radio-group v-model="formData.field116" size="medium">
<el-radio v-for="(item, index) in field116Options" :key="index" :label="item.value"
:disabled="item.disabled">{{ item.label }}</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="本次申请金额" prop="field117">
<el-input v-model="formData.field117" placeholder="请输入本次申请金额" clearable
:style="{ width: '100%' }">
</el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="金额大写" prop="field118">
<el-input v-model="formData.field118" placeholder="系统自动转换" :disabled='true' clearable
:style="{ width: '100%' }"></el-input>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="款项说明" prop="field119">
<el-input v-model="formData.field119" type="textarea" placeholder="请输入款项说明"
:autosize="{ minRows: 4, maxRows: 4 }" :style="{ width: '100%' }"></el-input>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="备注" prop="field120">
<el-input v-model="formData.field120" type="textarea" placeholder="请输入备注"
:autosize="{ minRows: 4, maxRows: 4 }" :style="{ width: '100%' }"></el-input>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="附件" prop="field121">
<el-upload ref="field121" :file-list="field121fileList" :action="field121Action"
:before-upload="field121BeforeUpload">
<el-button size="small" type="primary" icon="el-icon-upload">点击上传</el-button>
</el-upload>
</el-form-item>
</el-col>
</el-row>
</el-card>
<el-card>
<div class="tit">收款人信息</div>
<el-row>
<el-col :span="24">
<el-form-item label="开户银行" prop="field122">
<el-input v-model="formData.field122" placeholder="请输入开户银行" clearable
:style="{ width: '100%' }">
</el-input>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="开户名称" prop="field123">
<el-input v-model="formData.field123" placeholder="请输入开户名称" clearable
:style="{ width: '100%' }">
</el-input>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="账号" prop="field124">
<el-input v-model="formData.field124" placeholder="请输入账号" clearable :style="{ width: '100%' }">
</el-input>
</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-row>
</el-card>
</el-form>
</div>
</template>
<script>
export default {
components: {},
props: [],
data() {
return {
formData: {
field101: undefined,
field102: undefined,
field103: undefined,
field104: undefined,
field105: undefined,
field106: undefined,
field107: undefined,
field108: undefined,
field109: null,
field110: undefined,
field111: undefined,
field112: undefined,
field113: undefined,
field114: undefined,
field115: undefined,
field116: undefined,
field117: undefined,
field118: undefined,
field119: undefined,
field120: undefined,
field121: null,
field122: undefined,
field123: undefined,
field124: undefined,
},
rules: {
field101: [{
required: true,
message: '点击选择供应商',
trigger: 'blur'
}],
field102: [],
field103: [{
required: true,
message: '点击选择采购/分包合同',
trigger: 'blur'
}],
field104: [],
field105: [],
field106: [],
field107: [{
required: true,
message: '系统自动填写',
trigger: 'blur'
}],
field108: [{
required: true,
message: '系统自动填写',
trigger: 'blur'
}],
field109: [],
field110: [{
required: true,
message: '系统自动填写',
trigger: 'blur'
}],
field111: [],
field112: [],
field113: [],
field114: [],
field115: [],
field116: [],
field117: [{
required: true,
message: '请输入本次申请金额',
trigger: 'blur'
}],
field118: [],
field119: [],
field120: [],
field122: [],
field123: [],
field124: [],
},
field121Action: 'https://jsonplaceholder.typicode.com/posts/',
field121fileList: [],
field111Options: [{
"label": "选项一",
"value": 1
}, {
"label": "选项二",
"value": 2
}],
field112Options: [{
"label": "选项一",
"value": 1
}, {
"label": "选项二",
"value": 2
}],
field113Options: [{
"label": "选项一",
"value": 1
}, {
"label": "选项二",
"value": 2
}],
field114Options: [{
"label": "选项一",
"value": 1
}, {
"label": "选项二",
"value": 2
}],
field116Options: [{
"label": "已开",
"value": 1
}, {
"label": "未开",
"value": 2
}, {
"label": "无需开票",
"value": 3
}],
}
},
computed: {},
watch: {},
created() { },
mounted() { },
methods: {
submitForm() {
this.$refs['elForm'].validate(valid => {
if (!valid) return
// TODO
})
},
resetForm() {
this.$refs['elForm'].resetFields()
},
field121BeforeUpload(file) {
let isRightSize = file.size / 1024 / 1024 < 2
if (!isRightSize) {
this.$message.error('文件大小超过 2MB')
}
return isRightSize
},
}
}
</script>
<style>
.el-upload__tip {
line-height: 1.2;
}
.tit {
font-size: 17px;
margin-bottom: 10px;
}</style>

View File

@ -0,0 +1,275 @@
<template>
<div>
<el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="120px" label-position="left">
<el-card>
<div class="tit">供应商退款记录</div>
<el-row :gutter="10">
<el-col :span="12">
<el-form-item label="供应商名称" prop="field101">
<el-input v-model="formData.field101" placeholder="点击选择供应商" :disabled='true' clearable
:style="{ width: '100%' }"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="供应商编码" prop="field102">
<el-input v-model="formData.field102" placeholder="系统自动填写" :disabled='true' clearable
:style="{ width: '100%' }"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="合同编号" prop="field103">
<el-input v-model="formData.field103" placeholder="点击选择采购/分包合同" :disabled='true' clearable
:style="{ width: '100%' }"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="合同名称" prop="field104">
<el-input v-model="formData.field104" placeholder="系统自动填写" :disabled='true' clearable
:style="{ width: '100%' }"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="项目名称" prop="field105">
<el-input v-model="formData.field105" placeholder="系统自动填写" :disabled='true' clearable
:style="{ width: '100%' }"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="项目编码" prop="field106">
<el-input v-model="formData.field106" placeholder="系统自动填写" :disabled='true' clearable
:style="{ width: '100%' }"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="合同金额" prop="field107">
<el-input v-model="formData.field107" placeholder="系统自动填写" :disabled='true' clearable
:style="{ width: '100%' }"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="累计已支付" prop="field108">
<el-input v-model="formData.field108" placeholder="系统自动填写" :disabled='true' clearable
:style="{ width: '100%' }"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="退款金额" prop="field111">
<el-input v-model="formData.field111" placeholder="请选择退款金额" clearable
:style="{ width: '100%' }">
</el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="金额大写" prop="field118">
<el-input v-model="formData.field118" placeholder="系统自动转换" :disabled='true' clearable
:style="{ width: '100%' }"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="退款日期" prop="field115">
<el-date-picker v-model="formData.field115" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
:style="{ width: '100%' }" placeholder="请输入退款日期" clearable></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="退款方式" prop="field117">
<el-select v-model="formData.field117" placeholder="请选择退款方式" clearable
:style="{ width: '100%' }">
</el-select>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="退款原因" prop="field119">
<el-input v-model="formData.field119" type="textarea" placeholder="请输入退款原因"
:autosize="{ minRows: 4, maxRows: 4 }" :style="{ width: '100%' }"></el-input>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="备注" prop="field120">
<el-input v-model="formData.field120" type="textarea" placeholder="请输入备注"
:autosize="{ minRows: 4, maxRows: 4 }" :style="{ width: '100%' }"></el-input>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="附件" prop="field121">
<el-upload ref="field121" :file-list="field121fileList" :action="field121Action"
:before-upload="field121BeforeUpload">
<el-button size="small" type="primary" icon="el-icon-upload">点击上传</el-button>
</el-upload>
</el-form-item>
</el-col>
</el-row>
</el-card>
<el-card>
<div class="tit">收款账户</div>
<el-row>
<el-col :span="24">
<el-form-item label="账户编码" prop="field128">
<el-input v-model="formData.field128" placeholder="点击选择收款账户" :disabled='true' clearable
:style="{ width: '100%' }"></el-input>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="开户银行" prop="field122">
<el-input v-model="formData.field122" placeholder="系统自动填写" :disabled='true' clearable
:style="{ width: '100%' }"></el-input>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="账号" prop="field124">
<el-input v-model="formData.field124" placeholder="系统自动填写" :disabled='true' clearable
:style="{ width: '100%' }"></el-input>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="是否计意" prop="field129">
<el-radio-group v-model="formData.field129" size="medium">
<el-radio v-for="(item, index) in field129Options" :key="index" :label="item.value"
:disabled="item.disabled">{{ item.label }}</el-radio>
</el-radio-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-row>
</el-card>
</el-form>
</div>
</template>
<script>
export default {
components: {},
props: [],
data() {
return {
formData: {
field101: undefined,
field102: undefined,
field103: undefined,
field104: undefined,
field105: undefined,
field106: undefined,
field107: undefined,
field108: undefined,
field111: undefined,
field118: undefined,
field115: undefined,
field117: undefined,
field119: undefined,
field120: undefined,
field121: null,
field128: undefined,
field122: undefined,
field124: undefined,
field129: undefined,
},
rules: {
field101: [{
required: true,
message: '点击选择供应商',
trigger: 'blur'
}],
field102: [],
field103: [{
required: true,
message: '点击选择采购/分包合同',
trigger: 'blur'
}],
field104: [],
field105: [],
field106: [],
field107: [{
required: true,
message: '系统自动填写',
trigger: 'blur'
}],
field108: [{
required: true,
message: '系统自动填写',
trigger: 'blur'
}],
field111: [{
required: true,
message: '请选择退款金额',
trigger: 'blur'
}],
field118: [],
field115: [{
required: true,
message: '请输入退款日期',
trigger: 'change'
}],
field117: [{
required: true,
message: '请选择退款方式',
trigger: 'change'
}],
field119: [],
field120: [],
field128: [{
required: true,
message: '点击选择收款账户',
trigger: 'blur'
}],
field122: [],
field124: [],
field129: [],
},
field121Action: 'https://jsonplaceholder.typicode.com/posts/',
field121fileList: [],
field111Options: [{
"label": "选项一",
"value": 1
}, {
"label": "选项二",
"value": 2
}],
field129Options: [{
"label": "是",
"value": 1
}, {
"label": "否",
"value": 2
}],
}
},
computed: {},
watch: {},
created() { },
mounted() { },
methods: {
submitForm() {
this.$refs['elForm'].validate(valid => {
if (!valid) return
// TODO
})
},
resetForm() {
this.$refs['elForm'].resetFields()
},
field121BeforeUpload(file) {
let isRightSize = file.size / 1024 / 1024 < 2
if (!isRightSize) {
this.$message.error('文件大小超过 2MB')
}
return isRightSize
},
}
}
</script>
<style>
.el-upload__tip {
line-height: 1.2;
}
.tit {
font-size: 17px;
margin-bottom: 10px;
}
</style>

View File

@ -0,0 +1,185 @@
<template>
<div>
<el-card>
<el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="120px" label-position="left">
<el-row :gutter="10">
<el-col :span="12">
<el-form-item label="报销人" prop="field101">
<el-input v-model="formData.field101" placeholder="请输入报销人" clearable :style="{ width: '100%' }">
</el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="报销日期" prop="field102">
<el-date-picker v-model="formData.field102" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
:style="{ width: '100%' }" placeholder="请选择报销日期" clearable
:disabled='true'></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="客户名称" prop="field103">
<el-input v-model="formData.field103" placeholder="点击选择客户" :disabled='true' clearable
:style="{ width: '100%' }"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="付款方式" prop="field106">
<el-select v-model="formData.field106" placeholder="请选择付款方式" clearable
:style="{ width: '100%' }">
<el-option v-for="(item, index) in field106Options" :key="index" :label="item.label"
:value="item.value" :disabled="item.disabled"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="报销金额" prop="field107">
<el-input v-model="formData.field107" placeholder="系统自动计算" :disabled='true' clearable
:style="{ width: '100%' }"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="报销金额大写" prop="field108">
<el-input v-model="formData.field108" placeholder="系统自动计算" :disabled='true' clearable
:style="{ width: '100%' }"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="收款人姓名" prop="field109">
<el-input v-model="formData.field109" placeholder="请输入收款人姓名" clearable
:style="{ width: '100%' }">
</el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="收款银行" prop="field110">
<el-input v-model="formData.field110" placeholder="请输入收款银行" clearable
:style="{ width: '100%' }">
</el-input>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="收款账号" prop="field111">
<el-input v-model="formData.field111" placeholder="请输入收款账号" clearable
:style="{ width: '100%' }">
</el-input>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="备注" prop="field112">
<el-input v-model="formData.field112" type="textarea" placeholder="请输入备注"
:autosize="{ minRows: 4, maxRows: 4 }" :style="{ width: '100%' }"></el-input>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="附件" prop="field113">
<el-upload ref="field113" :file-list="field113fileList" :action="field113Action"
:before-upload="field113BeforeUpload">
<el-button size="small" type="primary" icon="el-icon-upload">点击上传</el-button>
</el-upload>
</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-row>
</el-form>
</el-card>
</div>
</template>
<script>
export default {
components: {},
props: [],
data() {
return {
formData: {
field101: undefined,
field102: null,
field103: undefined,
field106: undefined,
field107: undefined,
field108: undefined,
field109: undefined,
field110: undefined,
field111: undefined,
field112: undefined,
field113: null,
},
rules: {
field101: [],
field102: [{
required: true,
message: '请选择报销日期',
trigger: 'change'
}],
field103: [],
field106: [{
required: true,
message: '请选择付款方式',
trigger: 'change'
}],
field107: [],
field108: [],
field109: [{
required: true,
message: '请输入收款人姓名',
trigger: 'blur'
}],
field110: [{
required: true,
message: '请输入收款银行',
trigger: 'blur'
}],
field111: [{
required: true,
message: '请输入收款账号',
trigger: 'blur'
}],
field112: [],
},
field113Action: 'https://jsonplaceholder.typicode.com/posts/',
field113fileList: [],
field106Options: [{
"label": "选项一",
"value": 1
}, {
"label": "选项二",
"value": 2
}],
}
},
computed: {},
watch: {},
created() { },
mounted() { },
methods: {
submitForm() {
this.$refs['elForm'].validate(valid => {
if (!valid) return
// TODO
})
},
resetForm() {
this.$refs['elForm'].resetFields()
},
field113BeforeUpload(file) {
let isRightSize = file.size / 1024 / 1024 < 2
if (!isRightSize) {
this.$message.error('文件大小超过 2MB')
}
return isRightSize
},
}
}
</script>
<style>
.el-upload__tip {
line-height: 1.2;
}
</style>