fix: bug#16275、16087
This commit is contained in:
parent
42970df453
commit
3a90a25f3e
|
@ -1,35 +1,35 @@
|
|||
<!-- webhook请求头可编辑表格 -->
|
||||
<template>
|
||||
<div class="table-wrapper">
|
||||
<j-table
|
||||
:columns="columns"
|
||||
:data-source="dataSource"
|
||||
bordered
|
||||
:pagination="false"
|
||||
>
|
||||
<template #bodyCell="{ column, text, record }">
|
||||
<template v-if="['key', 'value'].includes(column.dataIndex)">
|
||||
<j-input v-model:value="record[column.dataIndex]" />
|
||||
<j-form :model="dataSource.table" ref="tableRef">
|
||||
<j-table :columns="columns" :data-source="dataSource.table" bordered :pagination="false" rowKey="_key">
|
||||
<template #bodyCell="{ column, text, record, index }">
|
||||
<template v-if="['key', 'value'].includes(column.dataIndex)">
|
||||
<j-form-item :name="[index, column.dataIndex]" :rules="[
|
||||
{
|
||||
max: 64,
|
||||
message: '最多可输入64个字符'
|
||||
},
|
||||
{ required: true, message: `请输入${column.title}`, trigger: 'blur' }]"
|
||||
>
|
||||
<j-input v-model:value="record[column.dataIndex]"/></j-form-item>
|
||||
</template>
|
||||
<template v-else-if="column.dataIndex === 'operation'">
|
||||
<j-button type="text">
|
||||
<template #icon>
|
||||
<delete-outlined @click="handleDelete(record.id)" />
|
||||
</template>
|
||||
</j-button>
|
||||
</template>
|
||||
</template>
|
||||
<template v-else-if="column.dataIndex === 'operation'">
|
||||
<j-button type="text">
|
||||
<template #icon>
|
||||
<delete-outlined @click="handleDelete(record.id)" />
|
||||
</template>
|
||||
</j-button>
|
||||
</j-table>
|
||||
<j-button type="dashed" @click="handleAdd" style="width: 100%; margin-top: 5px">
|
||||
<template #icon>
|
||||
<plus-outlined />
|
||||
</template>
|
||||
</template>
|
||||
</j-table>
|
||||
<j-button
|
||||
type="dashed"
|
||||
@click="handleAdd"
|
||||
style="width: 100%; margin-top: 5px"
|
||||
>
|
||||
<template #icon>
|
||||
<plus-outlined />
|
||||
</template>
|
||||
添加
|
||||
</j-button>
|
||||
添加
|
||||
</j-button>
|
||||
</j-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
@ -37,7 +37,8 @@
|
|||
import { PlusOutlined, DeleteOutlined } from '@ant-design/icons-vue';
|
||||
import { PropType } from 'vue';
|
||||
import type { IHeaders } from '../../types';
|
||||
|
||||
import { randomString } from '@/utils/utils'
|
||||
import { reject } from 'lodash-es';
|
||||
type Emits = {
|
||||
(e: 'update:headers', data: IHeaders[]): void;
|
||||
};
|
||||
|
@ -50,6 +51,8 @@ const props = defineProps({
|
|||
},
|
||||
});
|
||||
|
||||
const tableRef = ref();
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: 'KEY',
|
||||
|
@ -66,23 +69,48 @@ const columns = [
|
|||
fixed: 'right',
|
||||
},
|
||||
];
|
||||
|
||||
const dataSource = computed({
|
||||
get: () => props.headers,
|
||||
set: (val) => emit('update:headers', val),
|
||||
const dataSource = reactive({
|
||||
table:props.headers
|
||||
});
|
||||
|
||||
const handleHeader= (data:any) =>{
|
||||
return data.map((item:any)=>{
|
||||
return {...item,_key: randomString()}
|
||||
})
|
||||
}
|
||||
watch(()=>JSON.stringify(props.headers),()=>{
|
||||
dataSource.table = handleHeader(props.headers)
|
||||
})
|
||||
const handleDelete = (id: number) => {
|
||||
const idx = dataSource.value.findIndex((f) => f.id === id);
|
||||
dataSource.value.splice(idx, 1);
|
||||
const idx = dataSource.table.findIndex((f) => f.id === id);
|
||||
dataSource.table.splice(idx, 1);
|
||||
};
|
||||
const valueChange = () =>{
|
||||
return dataSource.table.map((item:any)=>{
|
||||
const {_key,...extra}=item;
|
||||
return extra
|
||||
})
|
||||
}
|
||||
const handleAdd = () => {
|
||||
dataSource.value.push({
|
||||
id: dataSource.value.length,
|
||||
dataSource.table.push({
|
||||
_key: randomString(),
|
||||
key: '',
|
||||
value: '',
|
||||
});
|
||||
};
|
||||
const validate = () =>{
|
||||
tableRef.value.validate().then(()=>{
|
||||
return valueChange()
|
||||
}).catch((err:any)=>{
|
||||
return false
|
||||
})
|
||||
}
|
||||
defineExpose({
|
||||
validate
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
<style lang="less" scoped>
|
||||
:deep(.ant-form-item){
|
||||
margin-top: -20px ;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -288,7 +288,8 @@
|
|||
</j-form-item>
|
||||
<j-form-item label="请求头">
|
||||
<EditTable
|
||||
v-model:headers="
|
||||
ref="editTable"
|
||||
:headers="
|
||||
formData.configuration.headers
|
||||
"
|
||||
/>
|
||||
|
@ -340,6 +341,7 @@ const router = useRouter();
|
|||
const route = useRoute();
|
||||
const useForm = Form.useForm;
|
||||
const flag = ref<boolean>(false)
|
||||
const editTable = ref();
|
||||
|
||||
// 消息类型
|
||||
const msgType = ref([
|
||||
|
@ -544,7 +546,8 @@ const resetPublicFiles = () => {
|
|||
*/
|
||||
const btnLoading = ref<boolean>(false);
|
||||
const handleSubmit = () => {
|
||||
validate()
|
||||
if(editTable.value.validate()){
|
||||
validate()
|
||||
.then(async () => {
|
||||
btnLoading.value = true;
|
||||
let res;
|
||||
|
@ -570,6 +573,59 @@ const handleSubmit = () => {
|
|||
.finally(() => {
|
||||
btnLoading.value = false;
|
||||
});
|
||||
}
|
||||
// Promise.all([validate(),editTable.value.validate()]).then(async()=>{
|
||||
// btnLoading.value = true;
|
||||
// let res;
|
||||
// if (!formData.value.id) {
|
||||
// res = await configApi.save(formData.value);
|
||||
// } else {
|
||||
// res = await configApi.update(formData.value);
|
||||
// }
|
||||
// if (res?.success) {
|
||||
// onlyMessage('保存成功');
|
||||
// if (route.query?.notifyType) {
|
||||
// // @ts-ignore
|
||||
// window?.onTabSaveSuccess(res.result);
|
||||
// setTimeout(() => window.close(), 300);
|
||||
// } else {
|
||||
// router.back();
|
||||
// }
|
||||
// }
|
||||
// }) .catch((err) => {
|
||||
// console.log('err: ', err);
|
||||
// })
|
||||
// .finally(() => {
|
||||
// btnLoading.value = false;
|
||||
// });
|
||||
// validate()
|
||||
// .then(async () => {
|
||||
// const a = editTable.value.validate();
|
||||
// console.log(a);
|
||||
// btnLoading.value = true;
|
||||
// let res;
|
||||
// if (!formData.value.id) {
|
||||
// res = await configApi.save(formData.value);
|
||||
// } else {
|
||||
// res = await configApi.update(formData.value);
|
||||
// }
|
||||
// if (res?.success) {
|
||||
// onlyMessage('保存成功');
|
||||
// if (route.query?.notifyType) {
|
||||
// // @ts-ignore
|
||||
// window?.onTabSaveSuccess(res.result);
|
||||
// setTimeout(() => window.close(), 300);
|
||||
// } else {
|
||||
// router.back();
|
||||
// }
|
||||
// }
|
||||
// })
|
||||
// .catch((err) => {
|
||||
// console.log('err: ', err);
|
||||
// })
|
||||
// .finally(() => {
|
||||
// btnLoading.value = false;
|
||||
// });
|
||||
};
|
||||
|
||||
watchEffect(() => {
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
export interface IHeaders {
|
||||
_key?: string;
|
||||
id?: number;
|
||||
key: string;
|
||||
value: string;
|
||||
|
|
|
@ -25,6 +25,10 @@ const context = ref()
|
|||
const replaceData = async (data: any) => {
|
||||
detailData.value = data
|
||||
context.value = data.context
|
||||
if (context.value.detailJson) {
|
||||
context.value.detailJson = context.value.detailJson.replace(/\\\"/g, '\"')
|
||||
|
||||
}
|
||||
if (context.value.hasOwnProperty('userIdList') || context.value.hasOwnProperty('toUser')) {
|
||||
templateApi.getUser(
|
||||
typeObj[detailData.value.notifyType],
|
||||
|
|
|
@ -111,7 +111,7 @@ import dayjs from 'dayjs';
|
|||
|
||||
const departmentStore = useDepartmentStore();
|
||||
|
||||
const emits = defineEmits(['confirm', 'update:visible']);
|
||||
const emits = defineEmits(['confirm', 'update:visible','next']);
|
||||
const props = defineProps<{
|
||||
visible: boolean;
|
||||
queryColumns: any[];
|
||||
|
@ -149,6 +149,7 @@ const confirm = () => {
|
|||
onlyMessage('操作成功');
|
||||
emits('confirm');
|
||||
emits('update:visible', false);
|
||||
emits('next',table.selectedRows.map((item: any) => item.id))
|
||||
})
|
||||
.finally(() => {
|
||||
loading.value = false;
|
||||
|
@ -457,13 +458,19 @@ const selectAll = (selected: Boolean, selectedRows: any,changeRows:any) => {
|
|||
}
|
||||
}
|
||||
const cancel = () => {
|
||||
departmentStore.setProductId()
|
||||
departmentStore.setProductId(undefined)
|
||||
emits('update:visible', false)
|
||||
}
|
||||
|
||||
const search = (query: any) => {
|
||||
queryParams.value = query
|
||||
}
|
||||
onUnmounted(()=>{
|
||||
if(props.assetType ==='device'){
|
||||
departmentStore.setProductId(undefined)
|
||||
}
|
||||
console.log(departmentStore.productId)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
|
|
@ -277,7 +277,7 @@ const columns = [
|
|||
handleValue(value: string, data: any) {
|
||||
return value && value.length ? [{
|
||||
column: 'id',
|
||||
termType: data.termType === 'not' ? 'nin' : 'in',
|
||||
termType: data?.termType === 'not' ? 'nin' : 'in',
|
||||
value: `${value.toString()}`
|
||||
}] : undefined;
|
||||
},
|
||||
|
|
|
@ -230,6 +230,7 @@
|
|||
asset-type="product"
|
||||
:defaultPermission="tableData.defaultPermission"
|
||||
@confirm="table.refresh"
|
||||
@next="next"
|
||||
/>
|
||||
<NextDialog
|
||||
v-if="dialogs.nextShow"
|
||||
|
@ -613,6 +614,9 @@ watch(
|
|||
if (!val) tableData.selectedRows = [];
|
||||
},
|
||||
);
|
||||
const next = (data:any) =>{
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
|
|
@ -14,7 +14,9 @@
|
|||
:params="queryParams"
|
||||
:rowSelection="{
|
||||
selectedRowKeys: table._selectedRowKeys,
|
||||
onChange: table.onSelectChange,
|
||||
onSelect: table.onSelectChange,
|
||||
onSelectAll: selectAll,
|
||||
onSelectNone: () => table._selectedRowKeys = []
|
||||
}"
|
||||
model="TABLE"
|
||||
>
|
||||
|
@ -156,7 +158,6 @@ const table = reactive({
|
|||
_selectedRowKeys: [] as string[],
|
||||
|
||||
requestFun: async (oParams: any) => {
|
||||
table.cancelSelect();
|
||||
if (props.parentId) {
|
||||
const params = {
|
||||
...oParams,
|
||||
|
@ -199,14 +200,19 @@ const table = reactive({
|
|||
|
||||
unBindUser_api(props.parentId, ids).then(() => {
|
||||
onlyMessage('操作成功');
|
||||
table._selectedRowKeys = []
|
||||
table.refresh();
|
||||
});
|
||||
},
|
||||
onSelectChange: (keys: string[]) => {
|
||||
table._selectedRowKeys = keys;
|
||||
},
|
||||
cancelSelect: () => {
|
||||
table._selectedRowKeys = [];
|
||||
onSelectChange: (row:any,selected:Boolean) => {
|
||||
const arr = new Set(table._selectedRowKeys);
|
||||
console.log(row)
|
||||
if(selected){
|
||||
arr.add(row.id)
|
||||
}else{
|
||||
arr.delete(row.id)
|
||||
}
|
||||
table._selectedRowKeys = [...arr.values()]
|
||||
},
|
||||
// 刷新列表
|
||||
refresh: () => {
|
||||
|
@ -216,10 +222,29 @@ const table = reactive({
|
|||
|
||||
const dialogVisible = ref(false);
|
||||
|
||||
const selectAll = (selected: Boolean, selectedRows: any,changeRows:any) => {
|
||||
if (selected) {
|
||||
changeRows.map((i: any) => {
|
||||
if (!table._selectedRowKeys.includes(i.id)) {
|
||||
table._selectedRowKeys.push(i.id)
|
||||
}
|
||||
})
|
||||
} else {
|
||||
const arr = changeRows.map((item: any) => item.id)
|
||||
const _ids: string[] = [];
|
||||
table._selectedRowKeys.map((i: any) => {
|
||||
if (!arr.includes(i)) {
|
||||
_ids.push(i)
|
||||
}
|
||||
})
|
||||
table._selectedRowKeys = _ids;
|
||||
}
|
||||
}
|
||||
watch(
|
||||
() => props.parentId,
|
||||
() => {
|
||||
table.refresh();
|
||||
table._selectedRowKeys = []
|
||||
},
|
||||
);
|
||||
</script>
|
||||
|
|
Loading…
Reference in New Issue