You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

308 lines
8.5 KiB

<template>
<div style="">
<span @click="chose" v-if="!label" style="cursor: pointer">请选择</span>
<span @click="chose" v-else style="cursor: pointer; color: rgb(14, 210, 191)">
{{ label }}
</span>
</div>
<div id="inputarea">
<a-modal
v-model:visible="visible"
:maskClosable="false"
@ok="handleOk"
@cancel="cancel"
width="900px"
style="top: 3%"
:title="title"
>
<!-- <p class="title">{{ title }}</p> -->
<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>
<ns-view-list-table v-bind="item.tableConfig" :row-selection="rowSelection" />
</a-tab-pane>
</a-tabs>
</div>
<div v-else>
<ns-view-list-table v-bind="tableConfig" :row-selection="rowSelection" />
</div>
</a-modal>
</div>
</template>
<script lang="ts">
import { runInThisContext } from 'node:vm';
import { defineComponent, ref } from 'vue';
import AppVue from '/@/App.vue';
// let rowSelection='';
export default defineComponent({
name: 'NsModalTable',
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 },
id: { type: String },
title: {
type: String,
},
changeTable: {
type: Function,
},
record: {
type: Object,
},
dataIndex: {
type: String,
},
// 需要该条数据上的更多信息
extraSelect: {
type: Array,
},
valueP: {
type: Object || String,
},
// 显示在界面上的字段名
showLabelValue: {
type: String,
},
},
emits: ['change', 'blur', 'changeTable'],
setup(props, { emit, attrs }) {
// console.log(JSON.parse(JSON.stringify(props.record)), 'zhouzhoutedfg');
// console.log(attrs, 'attrs123');
let newValue = attrs.value;
var label = '';
let showlabel = ref();
showlabel = props.showLabelValue;
// console.log(props.dataIndex, 'zhouzhou');
let actionInfo = props.record;
if (props.dataIndex) {
label = actionInfo && actionInfo[props.dataIndex + 'Name'];
// console.log(label, 'zhouxxlabel');
}
if (showlabel) {
label = props.record && props.record[showlabel];
let labelType = props.valueP;
if (labelType && labelType instanceof Array && labelType.length > 0) {
let arr: any[] = [];
labelType.forEach((element: { [x: string]: any }) => {
if (element[showlabel]) {
arr.push(element[showlabel]);
}
});
label = arr.join(',');
}
// console.log(props.valueP, 'valueP');
emit('change', props.valueP);
}
if (newValue) {
// console.log(newValue, 'label');
label = newValue;
emit('change', props.valueP);
}
return {
label,
};
},
data(props) {
return {
activeKey: 0,
visible: false,
key: props.defaultKey || '' || [],
roomUuid: '',
//是否选中后在取消的值
iflabelValue: '',
ifkeyValue: props.defaultKey || '' || [],
selectedRows: [],
// label: '',
rowSelection: {
type: props.type,
//默认选中
getCheckboxProps(record: { [x: string]: string }) {
let uuid = [] || '';
//如果有多个table
if (props.ifTab) {
for (const iterator of props.tabs) {
(uuid as Array<any>).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: [], selectedRows: []) => {
let labelDemo = [];
let selectedRowsValue = JSON.parse(JSON.stringify(selectedRows));
this.selectedRows = 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();
}
},
},
};
},
mounted() {
// this.set(obj, "newField", "newData")
},
methods: {
chose() {
this.visible = true;
},
handleOk() {
//确定--需要赋值
let that = this;
this.label = this.iflabelValue;
this.key = this.ifkeyValue;
// console.log(this.label, this.key, '我是周周子组件,哈哈哈');
let data = {
name: this.label,
value: this.key,
};
let moreSelects: any;
let selectedItems = JSON.parse(JSON.stringify(this.selectedRows));
// console.log(selectedItems, 'selectedItemszhouzhou ');
selectedItems &&
selectedItems.forEach((it) => {
if (this.extraSelect) {
this.extraSelect.forEach((element) => {
moreSelects = {
...moreSelects,
[element.name]: it[element.value],
};
});
// item = Object.assign(item, moreSelects);
}
});
let changeData = Object.assign(this.record, moreSelects);
changeData[this.dataIndex] = this.key;
changeData[this.dataIndex + `Name`] = this.label;
// console.log(changeData, 'changeData');
this.$emit('changeTable', changeData);
this.visible = false;
},
cancel() {
console.log('cancle');
//取消-不需要赋值
this.visible = false;
},
},
});
</script>
<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);
border-right: 0;
}
:deep(.ant-input:focus) {
border-color: rgba(223, 227, 233, 0.5);
border-right-width: 0 !important;
outline: 0;
box-shadow: none;
}
:deep(.ns-area) {
border: 0;
}
</style>