push
This commit is contained in:
xuziqiang
231
lib/component/form/input/input-modal.vue
Normal file
231
lib/component/form/input/input-modal.vue
Normal file
@@ -0,0 +1,231 @@
|
||||
<!-- @format -->
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<ns-input
|
||||
v-if="!baseStyle"
|
||||
class="ns-input-area"
|
||||
:disabled="true"
|
||||
v-model:value="itemName"
|
||||
placeholder="请选择">
|
||||
<template #addonAfter>
|
||||
<a-button type="primary" class="ns-area" style="height: 32px" @click="showModal">{{
|
||||
buttonLabel
|
||||
}}</a-button>
|
||||
<!-- <ns-button type="primary" class="ns-area" style="height: 32px" @click="showModal"
|
||||
>{{ buttonLabel }}
|
||||
</ns-button> -->
|
||||
</template>
|
||||
</ns-input>
|
||||
<span v-else @click="showModal">{{ buttonLabel }}</span>
|
||||
<ns-modal
|
||||
width="1000px"
|
||||
v-if="visible"
|
||||
v-model:visible="visible"
|
||||
:maskClosable="false"
|
||||
class="modal"
|
||||
wrapClassName="ns-modeBase"
|
||||
:title="title">
|
||||
<div class="ns-basic-modecontent">
|
||||
<!-- <h4 class="title">{{ title }}</h4> -->
|
||||
<ns-view-list-table :model="data" v-bind="tableConfig" :row-selection="rowSelection" />
|
||||
</div>
|
||||
<template #footer>
|
||||
<a-button key="back" @click="handleCancel">取消</a-button>
|
||||
<a-button
|
||||
key="submit"
|
||||
:style="{ borderColor: !ischeck ? '#dfe3e9' : '' }"
|
||||
:disabled="!ischeck"
|
||||
type="primary"
|
||||
@click="handleOk"
|
||||
>确定</a-button
|
||||
>
|
||||
</template>
|
||||
</ns-modal>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, reactive, ref, watch } from 'vue';
|
||||
export default defineComponent({
|
||||
name: 'NsInputModal',
|
||||
props: {
|
||||
baseStyle: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
defaultValue: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
showLabel: {
|
||||
type: String,
|
||||
},
|
||||
buttonLabel: {
|
||||
type: String,
|
||||
default: '选择',
|
||||
},
|
||||
rebackInfo: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
tableConfig: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
reName: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
formModel: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
},
|
||||
emits: ['change', 'getItem'],
|
||||
setup(props) {
|
||||
// eslint-disable-next-line vue/no-setup-props-destructure
|
||||
const { showLabel, rebackInfo, tableConfig, data, reName } = props;
|
||||
const visible = ref(false);
|
||||
const itemName = ref('');
|
||||
const showModal = () => {
|
||||
visible.value = true;
|
||||
};
|
||||
const selectItem = ref({});
|
||||
const ischeck = ref(false);
|
||||
const handleCancel = () => {
|
||||
visible.value = false;
|
||||
};
|
||||
watch(
|
||||
() => props.defaultValue,
|
||||
(e: any) => {
|
||||
itemName.value = e;
|
||||
},
|
||||
);
|
||||
|
||||
return {
|
||||
visible,
|
||||
showModal,
|
||||
// eslint-disable-next-line vue/no-dupe-keys
|
||||
showLabel,
|
||||
// eslint-disable-next-line vue/no-dupe-keys
|
||||
rebackInfo,
|
||||
// eslint-disable-next-line vue/no-dupe-keys
|
||||
data,
|
||||
// eslint-disable-next-line vue/no-dupe-keys
|
||||
tableConfig,
|
||||
// eslint-disable-next-line vue/no-dupe-keys
|
||||
reName,
|
||||
selectItem,
|
||||
ischeck,
|
||||
itemName,
|
||||
handleCancel,
|
||||
rowSelection: {
|
||||
type: 'radio',
|
||||
onSelect: (record: T, selected: Boolean) => {
|
||||
ischeck.value = true;
|
||||
selectItem.value = record;
|
||||
},
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleOk() {
|
||||
if (this.reName.length === 0) {
|
||||
this.itemName = this.selectItem[this.showLabel];
|
||||
if (this.rebackInfo.length === 0) {
|
||||
this.$emit('change', this.selectItem);
|
||||
this.$emit('getItem', this.selectItem);
|
||||
} else {
|
||||
if (this.rebackInfo.length === 1) {
|
||||
this.$emit('change', this.selectItem[this.rebackInfo[0]]);
|
||||
this.$emit('getItem', this.selectItem[this.rebackInfo[0]]);
|
||||
} else {
|
||||
let info = {};
|
||||
this.rebackInfo.forEach((item) => {
|
||||
info[item] = this.selectItem[item];
|
||||
});
|
||||
this.$emit('change', info);
|
||||
this.$emit('getItem', info);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
if (this.reName.length === this.rebackInfo.length && this.reName.length > 0) {
|
||||
if (this.rebackInfo.length === 1) {
|
||||
let info = {};
|
||||
info[this.reName[0]] = this.selectItem[this.rebackInfo[0]];
|
||||
this.$emit('change', info);
|
||||
this.$emit('getItem', info);
|
||||
} else {
|
||||
let info = {};
|
||||
this.rebackInfo.forEach((item, index) => {
|
||||
info[this.reName[index]] = this.selectItem[item];
|
||||
});
|
||||
this.$emit('change', info);
|
||||
this.$emit('getItem', info);
|
||||
}
|
||||
}
|
||||
}
|
||||
this.visible = false;
|
||||
// this.$emit('ceshi', 'qaq');
|
||||
//this.$emit('change', this.itemName);
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.ns-area:hover,
|
||||
// :focus {
|
||||
// color: white !important;
|
||||
// }
|
||||
.ns-area {
|
||||
color: white;
|
||||
}
|
||||
:deep(.ant-input) {
|
||||
border-right: 0;
|
||||
}
|
||||
:deep(.ns-area) {
|
||||
border: 0;
|
||||
}
|
||||
.title {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
:deep(.ns-line) {
|
||||
display: none;
|
||||
}
|
||||
:deep(.ant-modal-content) {
|
||||
max-width: 900px;
|
||||
}
|
||||
:deep(.ns-form-item) {
|
||||
width: 250px;
|
||||
}
|
||||
:deep(.ant-input-group-addon) {
|
||||
padding: 0 !important;
|
||||
border: 0px solid #dcdfe2 !important;
|
||||
height: 30px !important;
|
||||
}
|
||||
:deep(.ant-btn) {
|
||||
height: 30px !important;
|
||||
}
|
||||
// :deep(.ns-table-main) {
|
||||
// padding: 0 !important;
|
||||
// }
|
||||
:deep(.ant-input-disabled) {
|
||||
color: #172e3d !important;
|
||||
}
|
||||
:deep(.ns-table-header){
|
||||
padding-left:24px;
|
||||
}
|
||||
// :deep(.ns-table .ns-table-search) {
|
||||
// border-bottom: none !important;
|
||||
// }
|
||||
</style>
|
||||
Reference in New Issue
Block a user