push
This commit is contained in:
xuziqiang
263
lib/component/form/input/input-modal-table.vue
Normal file
263
lib/component/form/input/input-modal-table.vue
Normal file
@@ -0,0 +1,263 @@
|
||||
<!-- @format -->
|
||||
|
||||
<template>
|
||||
<div style="">
|
||||
<ns-input
|
||||
class="ns-input-area"
|
||||
readonly
|
||||
:disabled="disabled"
|
||||
placeholder="请选择"
|
||||
@click="chose"
|
||||
:value="label">
|
||||
<template #addonAfter>
|
||||
<ns-button type="primary" :disabled="disabled" class="ns-area" @click="chose">{{
|
||||
addonAfter
|
||||
}}</ns-button>
|
||||
</template>
|
||||
</ns-input>
|
||||
<!-- <div></div> -->
|
||||
<span style="color: red">{{ alert }}</span>
|
||||
</div>
|
||||
<div id="inputarea">
|
||||
<ns-modal
|
||||
class="customModal"
|
||||
v-model:visible="visible"
|
||||
:maskClosable="false"
|
||||
@ok="handleOk"
|
||||
@cancel="cancel"
|
||||
width="900px"
|
||||
:bodyStyle="{ padding: '16px' }"
|
||||
:title="title">
|
||||
<div v-if="ifTab">
|
||||
<a-tabs v-model:activeKey="activeKey">
|
||||
<a-tab-pane v-for="(item, index) in tabs" :key="index">
|
||||
<template #tab>
|
||||
<span> {{ item.name }} </span>
|
||||
</template>
|
||||
<div style="border: 16px solid #e5ebf0; border-top: none">
|
||||
<ns-view-list-table v-bind="item.tableConfig" :row-selection="rowSelection" />
|
||||
</div>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
</div>
|
||||
<div v-else style="border: 16px solid #e5ebf0; border-top: none">
|
||||
<ns-view-list-table v-bind="tableConfig" :row-selection="rowSelection" />
|
||||
</div>
|
||||
</ns-modal>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
// let rowSelection='';
|
||||
export default defineComponent({
|
||||
name: 'NsInputModalTable',
|
||||
props: {
|
||||
api: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
defaultKey: {
|
||||
type: String || Array,
|
||||
default: '',
|
||||
},
|
||||
alert: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
addonAfter: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
ifTab: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
tabs: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
tableConfig: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
labelValue: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
keyValue: {
|
||||
type: String || Array,
|
||||
default: '',
|
||||
},
|
||||
field: {
|
||||
type: String,
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: 'radio',
|
||||
},
|
||||
formModel: {
|
||||
type: Object,
|
||||
},
|
||||
allowClear: { type: Boolean },
|
||||
size: { type: String },
|
||||
disabled: { type: Boolean, default: false },
|
||||
id: { type: String },
|
||||
title: {
|
||||
type: String,
|
||||
},
|
||||
bodyStyle: Object,
|
||||
},
|
||||
emits: ['change'],
|
||||
setup(props, { emit, attrs }) {
|
||||
let newValue = attrs.value;
|
||||
var label = '';
|
||||
if (newValue) {
|
||||
label = newValue;
|
||||
emit('change', props.defaultKey);
|
||||
}
|
||||
return {
|
||||
label,
|
||||
};
|
||||
},
|
||||
data(props) {
|
||||
return {
|
||||
activeKey: 0,
|
||||
visible: false,
|
||||
key: props.defaultKey || '' || [],
|
||||
roomUuid: '',
|
||||
//是否选中后在取消的值
|
||||
iflabelValue: '',
|
||||
ifkeyValue: props.defaultKey || '' || [],
|
||||
// label: '',
|
||||
rowSelection: {
|
||||
type: props.type,
|
||||
selectedRowKeys: [props.defaultKey || ''],
|
||||
//默认选中
|
||||
getCheckboxProps(record: { [x: string]: string }) {
|
||||
let uuid = [] || '';
|
||||
//如果有多个table
|
||||
if (props.ifTab) {
|
||||
for (const iterator of props.tabs) {
|
||||
uuid.push(iterator.tableConfig.rowKey);
|
||||
}
|
||||
//单选
|
||||
if (props.type == 'radio') {
|
||||
for (const iterator of uuid) {
|
||||
if (iterator in record) {
|
||||
return {
|
||||
defaultChecked: record[iterator] == props.defaultKey, // 配置默认勾选的列
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
//多选
|
||||
else if (props.type == 'checkbox') {
|
||||
for (const iterator of uuid) {
|
||||
if (iterator in record) {
|
||||
for (const defaultKey of props.defaultKey) {
|
||||
return {
|
||||
defaultChecked: record[iterator] == defaultKey, // 配置默认勾选的列
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
//单个table
|
||||
else {
|
||||
if (props.type == 'radio') {
|
||||
return {
|
||||
defaultChecked: record[props.keyValue] == props.defaultKey, // 配置默认勾选的列
|
||||
};
|
||||
} else if (props.type == 'checkbox') {
|
||||
for (const iterator of props.defaultKey) {
|
||||
return {
|
||||
defaultChecked: record[props.keyValue] == iterator, // 配置默认勾选的列
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
onChange: (selectedRowKeys: Key[], selectedRows: EnumData[]) => {
|
||||
console.log('ceshi');
|
||||
console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
|
||||
this.rowSelection.selectedRowKeys = selectedRowKeys;
|
||||
let labelDemo = [];
|
||||
let selectedRowsValue = JSON.parse(JSON.stringify(selectedRows));
|
||||
if (props.type == 'radio') {
|
||||
this.ifkeyValue = selectedRowKeys[0];
|
||||
this.iflabelValue = selectedRowsValue[0][this.labelValue];
|
||||
} else if (props.type == 'checkbox') {
|
||||
for (const iterator of selectedRowsValue) {
|
||||
labelDemo.push(iterator[this.labelValue]);
|
||||
}
|
||||
this.ifkeyValue = selectedRowKeys;
|
||||
this.iflabelValue = labelDemo.join();
|
||||
}
|
||||
console.log(this.ifkeyValue);
|
||||
console.log(this.iflabelValue);
|
||||
},
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
chose() {
|
||||
this.visible = true;
|
||||
},
|
||||
handleOk() {
|
||||
//确定--需要赋值
|
||||
this.label = this.iflabelValue;
|
||||
this.key = this.ifkeyValue;
|
||||
this.$emit('change', this.key);
|
||||
this.visible = false;
|
||||
},
|
||||
cancel() {
|
||||
console.log('cancle');
|
||||
//取消-不需要赋值
|
||||
this.visible = false;
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="less">
|
||||
.ant-modal-content .ns-table .ns-table-search {
|
||||
// border-bottom: 24px solid #ffffff !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="less" scoped>
|
||||
// .ns-area:hover,
|
||||
// :focus {
|
||||
// color: white !important;
|
||||
// }
|
||||
// .ns-area {
|
||||
// color: white;
|
||||
// }
|
||||
|
||||
// :deep(.ant-input) {
|
||||
// background: rgba(223, 227, 233, 0.5);
|
||||
// }
|
||||
|
||||
// :deep(.ant-input:focus) {
|
||||
// border-color: rgba(223, 227, 233, 0.5);
|
||||
// border-right-width: 0px !important;
|
||||
// outline: 0;
|
||||
// box-shadow: none;
|
||||
// }
|
||||
|
||||
// :deep(.ns-area) {
|
||||
// border: 0;
|
||||
// }
|
||||
:deep(.ant-input-group-addon) {
|
||||
padding: 0 !important;
|
||||
border: 0px solid #dcdfe2 !important;
|
||||
height: 30px !important;
|
||||
}
|
||||
:deep(.ant-btn) {
|
||||
// height: 32px !important;
|
||||
}
|
||||
:deep(.ns-table-main) {
|
||||
padding: 0 !important;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user