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> <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> </template>
<script> <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" ...@@ -46,6 +46,7 @@ import FunctionBtn from "./FunctionBtn"
import BusinessButon from "./BusinessButton" import BusinessButon from "./BusinessButton"
import InfSearchGroup from "./InfSearchGroup" import InfSearchGroup from "./InfSearchGroup"
import InputSelect from "./InputSelect"
export default { export default {
install(Vue) { install(Vue) {
...@@ -95,5 +96,6 @@ export default { ...@@ -95,5 +96,6 @@ export default {
Vue.component("c-bus-button", BusinessButon) Vue.component("c-bus-button", BusinessButon)
Vue.component("c-infsearch-group", InfSearchGroup) Vue.component("c-infsearch-group", InfSearchGroup)
Vue.component("c-codelabel", CodeLabel) Vue.component("c-codelabel", CodeLabel)
Vue.component("c-inputselect", InputSelect)
} }
} }
\ No newline at end of file
src/views/Business/Ditdck/Docpre.vue
<template> <template>
<div class="eibs-tab"> <div class="eibs-tab">
<!-- =================左边====================== --> <!-- =================左边====================== -->
<c-col :span="11"> <c-col :span="11">
<el-form-item label="不符点">
<el-form-item label="不符点"> <c-col :span="21">
<c-col :span="21"> <c-input
<c-input type="textarea" v-model="model.bddgrp.blk.docdis" :disabled="!model.bddgrp.blk.docdisflg" maxlength="50" show-word-limit type="textarea"
placeholder="请输入不符点"></c-input> v-model="model.bddgrp.blk.docdis"
</c-col> :disabled="!model.bddgrp.blk.docdisflg"
maxlength="50"
show-word-limit
<c-col :span="3" style="text-align: right"> placeholder="请输入不符点"
<!-- <el-form-item label-width="0"> --> ></c-input>
<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>
<!-- =================右边====================== --> <c-col :span="3" style="text-align: right">
<c-col :span="11" :offset="1"> <!-- <el-form-item label-width="0"> -->
<c-col :span="24"> <c-button
<el-form-item label="" prop="bddgrp.rec.igndisflg"> size="small"
<c-checkbox v-model="model.bddgrp.rec.igndisflg">忽略不符点</c-checkbox> type="primary"
<c-checkbox v-model="model.bddgrp.blk.docdisflg">录入不符点</c-checkbox> icon="el-icon-search"
</el-form-item> style="margin-left: 0"
</c-col> @click="onDocdisButtxmsel"
disabled
<!-- <c-col :span="24"> ></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 label="" prop="bddgrp.blk.docdisflg">
</el-form-item> </el-form-item>
</c-col> --> </c-col> -->
<c-col :span="24"> <c-col :span="24">
<el-form-item label="收到的通知类型" prop="bddgrp.rec.advtyp"> <el-form-item label="收到的通知类型" prop="bddgrp.rec.advtyp">
<c-select v-model="model.bddgrp.rec.advtyp" style="width:100%" placeholder="请选择收到的通知类型"> <c-select
</c-select> v-model="model.bddgrp.rec.advtyp"
</el-form-item> style="width: 100%"
</c-col> placeholder="请选择收到的通知类型"
>
<c-col :span="24"> </c-select>
<el-form-item label="付款日期" prop="bddgrp.rec.totdat"> </el-form-item>
<c-date-picker type="date" v-model="model.bddgrp.rec.totdat" style="width:100%" </c-col>
placeholder="请选择付款日期"></c-date-picker>
</el-form-item> <c-col :span="24">
</c-col> <el-form-item label="付款日期" prop="bddgrp.rec.totdat">
<c-date-picker
<c-col :span="24"> type="date"
<el-form-item label="不符点通知日期" prop="bddgrp.rec.disdat"> v-model="model.bddgrp.rec.totdat"
<c-date-picker type="date" v-model="model.bddgrp.rec.disdat" style="width:100%" style="width: 100%"
placeholder="请选择不符点通知日期"></c-date-picker> placeholder="请选择付款日期"
</el-form-item> ></c-date-picker>
</c-col> </el-form-item>
</c-col>
<c-col :span="24">
<el-form-item label="" prop="bddgrp.rec.approvcod"> <c-col :span="24">
<c-checkbox v-model="model.bddgrp.rec.approvcod">议付行担保协议</c-checkbox> <el-form-item label="不符点通知日期" prop="bddgrp.rec.disdat">
<c-checkbox v-model="model.bdtp.cre732flg">Create MT 732</c-checkbox> <c-date-picker
</el-form-item> type="date"
</c-col> v-model="model.bddgrp.rec.disdat"
style="width: 100%"
<!-- <c-col :span="8"> 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-checkbox v-model="model.bdtp.cre752flg">Create MT 752</c-checkbox>
</c-col> </c-col>
...@@ -95,49 +124,92 @@ ...@@ -95,49 +124,92 @@
</el-form-item> </el-form-item>
</c-col> --> </c-col> -->
<!-- <c-col :span="24"> <!-- <c-col :span="24">
<el-form-item label="" prop="bdtp.cre732flg"> <el-form-item label="" prop="bdtp.cre732flg">
</el-form-item> </el-form-item>
</c-col> --> </c-col> -->
</c-col>
</c-col> <!-- =================已交单据====================== -->
<c-col :span="24">
<!-- =================已交单据====================== --> <c-table
<c-col :span="24"> :border="true"
:paginationShow="false"
<c-table :border="true" :paginationShow="false" :list="model.bdtp.docgrdm.docgrd" style="width:80%,text-align:center"> :list="model.bdtp.docgrdm.docgrd"
<el-table-column prop="cmail1" label="1st" width="auto"> </el-table-column> style="width:80%,text-align:center"
<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 prop="cmail1" label="1st" width="auto">
<el-table-column label="" prop="det" width="80px" fixed="right"> </el-table-column>
<template slot-scope="scope" slot="header"> <el-table-column prop="cmail2" label="2st" width="auto">
<el-button </el-table-column>
circle <el-table-column prop="docnam" label="Document" width="auto">
style="padding:4px" </el-table-column>
class="el-icon-plus" <el-table-column label="操作" prop="det" width="80px" fixed="right">
size="mini" <template slot="header">
@click="addRow(scope)" <span>操作</span>
> <el-button
</el-button> circle
<el-button style="padding: 4px; margin-left: 9px"
class="el-icon-plus"
size="mini"
@click="addDialogVisible = true"
>
</el-button>
<!--
style="padding:4px" style="padding:4px"
circle circle
class="el-icon-minus" class="el-icon-minus"
size="mini" size="mini"
@click="removeRow(scope)" @click="removeRow(scope)"
> >
</el-button> </el-button> -->
</template> </template>
</el-table-column> <template slot-scope="scope">
</c-table> <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> </c-col>
<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>
</div> </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> </template>
<script> <script>
import Api from "~/service/Api"; import Api from "~/service/Api";
...@@ -150,7 +222,15 @@ export default { ...@@ -150,7 +222,15 @@ export default {
props: ["model", "codes"], props: ["model", "codes"],
mixins: [CommonProcess], mixins: [CommonProcess],
data() { data() {
return {}; return {
addDialogVisible: false,
dialog: {
cmail1: "",
cmail2: "",
docnam: "",
},
liData:["增值税发票11","增值税发票222","增值税发票33","增值税发票44","增值税发票55"],
};
}, },
methods: { methods: {
...Event, ...Event,
...@@ -162,4 +242,6 @@ export default { ...@@ -162,4 +242,6 @@ export default {
.el-checkbox >>> .el-checkbox__label { .el-checkbox >>> .el-checkbox__label {
width: 70px; width: 70px;
} }
.inputDiv {
}
</style> </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