push
This commit is contained in:
xuziqiang
308
lib/component/form/etable/modal-table.vue
Normal file
308
lib/component/form/etable/modal-table.vue
Normal file
@@ -0,0 +1,308 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user