Skip to content

V
vue-gjjs
Commit 3e9bb4fa by liushikai
Options

输入下拉框组件

parent dabaf144
Showing with 308 additions and 115 deletions
src/components/Input.vue
<template>
<el-input :id="id" ref="form-item" v-model="model" v-bind="attrs" v-on="$listeners" v-bind:disabled="isDisable"/>
<el-input :id="id" ref="form-item" v-model="model" v-bind="attrs" v-on="$listeners" v-bind:disabled="isDisable">
<template v-slot:suffix>
<slot name="suffix"></slot>
</template>
</el-input>
</template>
<script>
......
src/components/InputSelect.vue 0 → 100644
<template>
<div>
<el-popover
placement="bottom"
:width="width"
trigger="click"
popper-class="popoverInputClass"
v-model="popoverShow"
>
<ul class="el-select-dropdown__list">
<li
class="el-select-dropdown__item"
v-for="(item, idx) in liData"
:key="idx"
@click="selectItem(item)"
>
<span>{{ item }}</span>
</li>
</ul>
<c-input v-model="model" slot="reference">
<template v-slot:suffix>
<i
class="el-icon-arrow-down"
v-if="!popoverShow"
@click="popoverShow = false"
></i>
<i class="el-icon-arrow-up" v-else @click="popoverShow = true"></i>
</template>
</c-input>
</el-popover>
</div>
</template>
<script>
export default {
data() {
return {
popoverShow: false,
width: null,
};
},
props: {
value: {
type: [String, Number],
default: undefined,
},
liData: {
type: Array,
default: [],
},
},
computed: {
model: {
get() {
return this.value;
},
set(newVal) {
this.$emit("input", newVal);
},
},
},
mounted() {
this.width = this.$el.clientWidth;
},
methods: {
selectItem(val) {
this.popoverShow = false;
this.model = val;
},
},
};
</script>
<style>
.el-popper.popoverInputClass {
margin: 12px 0 5px;
padding: 0;
}
</style>
<style scoped>
.el-select-dropdown__list {
list-style: none;
padding: 6px 0;
margin: 0;
box-sizing: border-box;
padding-inline-start: 0;
}
.el-select-dropdown__item {
font-size: 14px;
padding: 0 20px;
position: relative;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #606266;
height: 34px;
line-height: 34px;
box-sizing: border-box;
cursor: pointer;
}
</style>
\ No newline at end of file
src/components/index.js
......@@ -46,6 +46,7 @@ import FunctionBtn from "./FunctionBtn"
import BusinessButon from "./BusinessButton"
import InfSearchGroup from "./InfSearchGroup"
import InputSelect from "./InputSelect"
export default {
install(Vue) {
......@@ -95,5 +96,6 @@ export default {
Vue.component("c-bus-button", BusinessButon)
Vue.component("c-infsearch-group", InfSearchGroup)
Vue.component("c-codelabel", CodeLabel)
Vue.component("c-inputselect", InputSelect)
}
}
\ No newline at end of file
src/views/Business/Ditdck/Docpre.vue
<template>
<div class="eibs-tab">
<!-- =================左边====================== -->
<c-col :span="11">
<el-form-item label="不符点">
<c-col :span="21">
<c-input type="textarea" v-model="model.bddgrp.blk.docdis" :disabled="!model.bddgrp.blk.docdisflg" maxlength="50" show-word-limit
placeholder="请输入不符点"></c-input>
</c-col>
<c-col :span="3" style="text-align: right">
<!-- <el-form-item label-width="0"> -->
<c-button
size="small"
type="primary"
icon="el-icon-search"
style="margin-left: 0"
@click="onDocdisButtxmsel"
disabled
></c-button>
<!-- </el-form-item> -->
</c-col>
</el-form-item>
<c-col :span="24">
<el-form-item label="注释和结论">
<c-input type="textarea" v-model="model.bddgrp.blk.comcon" maxlength="65" show-word-limit
placeholder="请输入注释和结论"></c-input>
</el-form-item>
</c-col>
<c-col :span="24">
<el-form-item label="到期付款确认备注">
<c-input type="textarea" v-model="model.bddgrp.blk.accrmk" maxlength="65" show-word-limit
placeholder="请输入到期付款确认备注"></c-input>
</el-form-item>
</c-col>
<div class="eibs-tab">
<!-- =================左边====================== -->
<c-col :span="11">
<el-form-item label="不符点">
<c-col :span="21">
<c-input
type="textarea"
v-model="model.bddgrp.blk.docdis"
:disabled="!model.bddgrp.blk.docdisflg"
maxlength="50"
show-word-limit
placeholder="请输入不符点"
></c-input>
</c-col>
<!-- =================右边====================== -->
<c-col :span="11" :offset="1">
<c-col :span="24">
<el-form-item label="" prop="bddgrp.rec.igndisflg">
<c-checkbox v-model="model.bddgrp.rec.igndisflg">忽略不符点</c-checkbox>
<c-checkbox v-model="model.bddgrp.blk.docdisflg">录入不符点</c-checkbox>
</el-form-item>
</c-col>
<!-- <c-col :span="24">
<c-col :span="3" style="text-align: right">
<!-- <el-form-item label-width="0"> -->
<c-button
size="small"
type="primary"
icon="el-icon-search"
style="margin-left: 0"
@click="onDocdisButtxmsel"
disabled
></c-button>
<!-- </el-form-item> -->
</c-col>
</el-form-item>
<c-col :span="24">
<el-form-item label="注释和结论">
<c-input
type="textarea"
v-model="model.bddgrp.blk.comcon"
maxlength="65"
show-word-limit
placeholder="请输入注释和结论"
></c-input>
</el-form-item>
</c-col>
<c-col :span="24">
<el-form-item label="到期付款确认备注">
<c-input
type="textarea"
v-model="model.bddgrp.blk.accrmk"
maxlength="65"
show-word-limit
placeholder="请输入到期付款确认备注"
></c-input>
</el-form-item>
</c-col>
</c-col>
<!-- =================右边====================== -->
<c-col :span="11" :offset="1">
<c-col :span="24">
<el-form-item label="" prop="bddgrp.rec.igndisflg">
<c-checkbox v-model="model.bddgrp.rec.igndisflg"
>忽略不符点</c-checkbox
>
<c-checkbox v-model="model.bddgrp.blk.docdisflg"
>录入不符点</c-checkbox
>
</el-form-item>
</c-col>
<!-- <c-col :span="24">
<el-form-item label="" prop="bddgrp.blk.docdisflg">
</el-form-item>
</c-col> -->
<c-col :span="24">
<el-form-item label="收到的通知类型" prop="bddgrp.rec.advtyp">
<c-select v-model="model.bddgrp.rec.advtyp" style="width:100%" placeholder="请选择收到的通知类型">
</c-select>
</el-form-item>
</c-col>
<c-col :span="24">
<el-form-item label="付款日期" prop="bddgrp.rec.totdat">
<c-date-picker type="date" v-model="model.bddgrp.rec.totdat" style="width:100%"
placeholder="请选择付款日期"></c-date-picker>
</el-form-item>
</c-col>
<c-col :span="24">
<el-form-item label="不符点通知日期" prop="bddgrp.rec.disdat">
<c-date-picker type="date" v-model="model.bddgrp.rec.disdat" style="width:100%"
placeholder="请选择不符点通知日期"></c-date-picker>
</el-form-item>
</c-col>
<c-col :span="24">
<el-form-item label="" prop="bddgrp.rec.approvcod">
<c-checkbox v-model="model.bddgrp.rec.approvcod">议付行担保协议</c-checkbox>
<c-checkbox v-model="model.bdtp.cre732flg">Create MT 732</c-checkbox>
</el-form-item>
</c-col>
<!-- <c-col :span="8">
<c-col :span="24">
<el-form-item label="收到的通知类型" prop="bddgrp.rec.advtyp">
<c-select
v-model="model.bddgrp.rec.advtyp"
style="width: 100%"
placeholder="请选择收到的通知类型"
>
</c-select>
</el-form-item>
</c-col>
<c-col :span="24">
<el-form-item label="付款日期" prop="bddgrp.rec.totdat">
<c-date-picker
type="date"
v-model="model.bddgrp.rec.totdat"
style="width: 100%"
placeholder="请选择付款日期"
></c-date-picker>
</el-form-item>
</c-col>
<c-col :span="24">
<el-form-item label="不符点通知日期" prop="bddgrp.rec.disdat">
<c-date-picker
type="date"
v-model="model.bddgrp.rec.disdat"
style="width: 100%"
placeholder="请选择不符点通知日期"
></c-date-picker>
</el-form-item>
</c-col>
<c-col :span="24">
<el-form-item label="" prop="bddgrp.rec.approvcod">
<c-checkbox v-model="model.bddgrp.rec.approvcod"
>议付行担保协议</c-checkbox
>
<c-checkbox v-model="model.bdtp.cre732flg">Create MT 732</c-checkbox>
</el-form-item>
</c-col>
<!-- <c-col :span="8">
<c-checkbox v-model="model.bdtp.cre752flg">Create MT 752</c-checkbox>
</c-col>
......@@ -95,49 +124,92 @@
</el-form-item>
</c-col> -->
<!-- <c-col :span="24">
<!-- <c-col :span="24">
<el-form-item label="" prop="bdtp.cre732flg">
</el-form-item>
</c-col> -->
</c-col>
<!-- =================已交单据====================== -->
<c-col :span="24">
<c-table :border="true" :paginationShow="false" :list="model.bdtp.docgrdm.docgrd" style="width:80%,text-align:center">
<el-table-column prop="cmail1" label="1st" width="auto"> </el-table-column>
<el-table-column prop="cmail2" label="2st" width="auto"> </el-table-column>
<el-table-column prop="docnam" label="Document" width="auto"> </el-table-column>
<el-table-column label="" prop="det" width="80px" fixed="right">
<template slot-scope="scope" slot="header">
<el-button
circle
style="padding:4px"
class="el-icon-plus"
size="mini"
@click="addRow(scope)"
>
</el-button>
<el-button
</c-col>
<!-- =================已交单据====================== -->
<c-col :span="24">
<c-table
:border="true"
:paginationShow="false"
:list="model.bdtp.docgrdm.docgrd"
style="width:80%,text-align:center"
>
<el-table-column prop="cmail1" label="1st" width="auto">
</el-table-column>
<el-table-column prop="cmail2" label="2st" width="auto">
</el-table-column>
<el-table-column prop="docnam" label="Document" width="auto">
</el-table-column>
<el-table-column label="操作" prop="det" width="80px" fixed="right">
<template slot="header">
<span>操作</span>
<el-button
circle
style="padding: 4px; margin-left: 9px"
class="el-icon-plus"
size="mini"
@click="addDialogVisible = true"
>
</el-button>
<!--
style="padding:4px"
circle
class="el-icon-minus"
size="mini"
@click="removeRow(scope)"
>
</el-button>
</template>
</el-table-column>
</c-table>
</el-button> -->
</template>
<template slot-scope="scope">
<c-button
style="margin-left: 0"
size="small"
@click="removeRow(scope.$index, scope.row)"
>
删除
</c-button>
</template>
</el-table-column>
</c-table>
</c-col>
<c-col>
<el-dialog :visible.sync="addDialogVisible" center width="500px">
<c-col :span="24">
<c-col :span="20">
<el-form-item label="1st" label-width="100px">
<c-input v-model="dialog.cmail1"></c-input>
</el-form-item>
</c-col>
</c-col>
</div>
<c-col :span="24">
<c-col :span="20">
<el-form-item label="2st" label-width="100px">
<c-input v-model="dialog.cmail2"></c-input>
</el-form-item>
</c-col>
</c-col>
<c-col :span="24">
<c-col :span="20">
<el-form-item label="Document" label-width="100px">
<!-- <c-select v-model="dialog.docnam" style="width:100%"></c-select> -->
<c-inputselect :liData="liData" v-model="dialog.docnam">
</c-inputselect>
</el-form-item>
</c-col>
</c-col>
<!-- <c-col :span="24"> -->
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="addRow">添加</el-button>
<el-button @click="addDialogVisible = false">取消</el-button>
</span>
<!-- </c-col> -->
</el-dialog>
</c-col>
</div>
</template>
<script>
import Api from "~/service/Api";
......@@ -150,7 +222,15 @@ export default {
props: ["model", "codes"],
mixins: [CommonProcess],
data() {
return {};
return {
addDialogVisible: false,
dialog: {
cmail1: "",
cmail2: "",
docnam: "",
},
liData:["增值税发票11","增值税发票222","增值税发票33","增值税发票44","增值税发票55"],
};
},
methods: {
...Event,
......@@ -162,4 +242,6 @@ export default {
.el-checkbox >>> .el-checkbox__label {
width: 70px;
}
.inputDiv {
}
</style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment