153 lines
3.8 KiB
Vue
153 lines
3.8 KiB
Vue
<template>
|
|
<div class="ruleAddTable">
|
|
<BaseTable
|
|
ref="receiptsTable"
|
|
:showIndex="true"
|
|
:tableData="ruleAddTableData"
|
|
:tableColumn="receiptsTableColumn"
|
|
:border="false"
|
|
:funData="receiptsFunData"
|
|
tableHeight="60vh"
|
|
@onFunc="receiptsOnFunc"
|
|
>
|
|
<template #dbType="{row}">
|
|
<el-select v-model="row['dbType']" placeholder="请选择"
|
|
@change="(val)=>ruleTypeSeleceChangHandle(val,row)"
|
|
>
|
|
<el-option
|
|
v-for="item in ruleTypeOptions"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
>
|
|
</el-option>
|
|
</el-select>
|
|
</template>
|
|
<template #dbValue="{row}">
|
|
<div v-if="!row['dbType']">请选择格式类型</div>
|
|
<div v-else-if="row['dbType'] === '1'">{{ row.dbValue }}</div>
|
|
<div v-else-if="row['dbType'] === '2'">
|
|
<el-input v-model="row.dbValue"></el-input>
|
|
</div>
|
|
<div v-else-if="row['dbType'] === '3'">
|
|
<el-select v-model="row.dbValue" placeholder="请选择" style="width: 100%;">
|
|
<el-option
|
|
v-for="item in dateOptions"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
>
|
|
</el-option>
|
|
</el-select>
|
|
</div>
|
|
<div v-else-if="row['dbType'] === '4'">
|
|
<el-input v-model="row.dbValue" @input="(val)=>integerNumber(val,row)"></el-input>
|
|
</div>
|
|
</template>
|
|
</BaseTable>
|
|
<div class="receiptsAddRow" style="margin-top: 30px;
|
|
border: 1px dotted #ccc;
|
|
text-align: center;
|
|
height: 50px;
|
|
line-height: 50px;"
|
|
>
|
|
<el-link
|
|
type="primary"
|
|
@click="receiptsAddRow"
|
|
:underline="false"
|
|
>+ 添加
|
|
</el-link>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import BaseTable from '@/views/intergrationTask/compoments/baseTable.vue'
|
|
|
|
export default {
|
|
name: 'ruleAddTable',
|
|
components: { BaseTable },
|
|
data() {
|
|
return {
|
|
receiptsTableData: [],//单据规则表单
|
|
ruleAddTableData: [],//单据规则添加用表单
|
|
receiptsTableColumn: [
|
|
{
|
|
title: '类型',
|
|
id: 'dbType'
|
|
},
|
|
{
|
|
title: '格式规则',
|
|
id: 'dbValue'
|
|
}
|
|
],//单据规则表单
|
|
ruleTypeOptions: [
|
|
{
|
|
label: '连接符号',
|
|
value: '1'
|
|
}, {
|
|
label: '字符串',
|
|
value: '2'
|
|
}, {
|
|
label: '日期',
|
|
value: '3'
|
|
}, {
|
|
label: '流水号',
|
|
value: '4'
|
|
}
|
|
],//单据规则下啦
|
|
receiptsFunData: [
|
|
{
|
|
text: '删除',
|
|
color: 'red'
|
|
}
|
|
],//单据规则按钮
|
|
dateOptions: [
|
|
{
|
|
label: 'yyyy-MM-dd',
|
|
value: 'yyyy-MM-dd'
|
|
}, {
|
|
label: 'yyyyMMdd',
|
|
value: 'yyyyMMdd'
|
|
}, {
|
|
label: 'yyyy-MM-dd HH:mm:ss',
|
|
value: 'yyyy-MM-dd HH:mm:ss'
|
|
}, {
|
|
label: 'yyyyMMddHHmmss',
|
|
value: 'yyyyMMddHHmmss'
|
|
}, {
|
|
label: 'yyyyMMddHHmmssSSS',
|
|
value: 'yyyyMMddHHmmssSSS'
|
|
}
|
|
],
|
|
}
|
|
},
|
|
methods: {
|
|
//规则表格删除
|
|
receiptsOnFunc(row) {
|
|
this.ruleAddTableData.splice(row.index, 1)
|
|
},
|
|
//单据规则添加行
|
|
receiptsAddRow() {
|
|
this.ruleAddTableData.push({})
|
|
},
|
|
//单据规则下拉改变事件
|
|
ruleTypeSeleceChangHandle(val, row) {
|
|
this.$set(row, 'dbValue', '')
|
|
if (val === '1') {
|
|
row['dbValue'] = '-'
|
|
}
|
|
},
|
|
//流水号修改事件
|
|
integerNumber(val, row) {
|
|
row['dbValue'] = row['dbValue'].replace(/[^\d]/g, '')
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
|
</style>
|