文件格式
addModal
addModal.ts
import { defineComponent, reactive, ref, toRefs } from 'vue';
import { UploadOutlined } from '@ant-design/icons-vue';
import ModalEx from '@/components/ModalEx/ModalEx';
import { isArray } from 'xe-utils';
export default defineComponent({
components: {
UploadOutlined,
ModalEx,
},
setup(props, { emit }) {
const modalOperation = reactive({
visible: false, //弹框显隐
editOrAdd: true, //新增为true, 编辑为false
canEdit: false, //判断是否可编辑
});
const formStateRef = ref(); //表单
//渠道类型
const selectValue = ref('');
const statusOptions = ref([
{
value: '正常',
label: '正常',
},
{
value: '停用',
label: '停用',
},
]);
const hrcOptions = ref([
{
value: '1111',
label: '1111',
},
{
value: '2222',
label: '2222',
},
]);
const icsOptions = ref([
{
value: '222222',
label: '222222',
},
{
value: '111111',
label: '111111',
},
]);
//表单初始数据
const data = ref({
appId: '',
appName: '',
appNameEn: '',
status: '',
creater: '',
createdDate: '',
textValue: '',
authencationSource: '',
orgSourceType: '',
// channelName: '',
// channelType: '',
// channelSet: '',
// address: '',
// registeredAddress: '',
// legalName: '',
// agentName: '',
// agentNumber: '',
// phone: '',
// zipCode: '',
// mobile: '',
// email: '',
// fax: '',
// account: '',
// accountName: '',
// openBank: '',
// payNumber: '',
// hostingName: '',
// hostingNumber: '',
});
const dataInit = () => {
data.value.appId = '';
data.value.appName = '';
data.value.appNameEn = '';
data.value.status = '';
data.value.creater = '';
data.value.createdDate = '';
data.value.textValue = '';
data.value.authencationSource = '';
data.value.orgSourceType = '';
// data.value.channelName = '';
// data.value.channelType = '';
// data.value.channelSet = '';
// data.value.address = '';
// data.value.registeredAddress = '';
// data.value.legalName = '';
// data.value.agentName = '';
// data.value.agentNumber = '';
// data.value.phone = '';
// data.value.zipCode = '';
// data.value.mobile = '';
// data.value.email = '';
// data.value.fax = '';
// data.value.account = '';
// data.value.accountName = '';
// data.value.openBank = '';
// data.value.payNumber = '';
// data.value.hostingName = '';
// data.value.hostingNumber = '';
};
const showModal = (addOrEdit: string, formData: any, isEdit: boolean) => {
// formStateRef.value.resetFields();
console.log('编辑', formData);
if (addOrEdit === 'edit' && isArray(formData)) {
data.value = formData[0];
// data.value = JSON.parse(JSON.stringify(formData[0]));
modalOperation.canEdit = false;
} else if (addOrEdit === 'edit' && isEdit === false) {
// data.value = JSON.parse(JSON.stringify(formData));
data.value = formData;
modalOperation.canEdit = true;
} else if (addOrEdit === 'edit') {
// data.value = JSON.parse(JSON.stringify(formData));
data.value = formData;
modalOperation.canEdit = false;
} else {
modalOperation.canEdit = false;
dataInit();
}
modalOperation.editOrAdd = addOrEdit === 'add' ? true : false;
modalOperation.visible = true;
console.log('表单重置方法', formStateRef.value);
};
//确认
const handleConfirm = (e: any) => {
formStateRef.value
.validate()
.then(() => {
modalOperation.visible = false;
console.log('data', data.value);
emit('handleData', data.value, modalOperation.editOrAdd);
})
.catch((err: any) => {
console.log(err);
});
};
const handleClose = () => {
emit('close');
};
const rules = reactive({
channelName: [{ required: true, message: '渠道名称必填', trigger: 'blur', type: 'string' }],
});
return {
handleClose,
handleConfirm,
showModal,
...toRefs(modalOperation),
formStateRef,
data,
statusOptions,
hrcOptions,
icsOptions,
selectValue,
rules,
};
},
});
addModal.vue
<template>
<a-modal
:title="editOrAdd ? '新增应用' : '编辑应用'"
v-model:visible="visible"
@cancel="handleClose"
@ok="handleConfirm"
:getContainer="false"
showFooter
><!-- height=1000px width=800px -->
<a-form ref="formStateRef" :model="data" :rules="rules">
<a-form-item label="应用ID" name="appId">
<!-- required="true" -->
<a-input size="small" v-model:value.trim="data.appId" :disabled="canEdit" placeholder="请输入" />
</a-form-item>
<a-form-item label="应用名称" name="appName">
<!-- required="true" -->
<a-input size="small" v-model:value.trim="data.appName" :disabled="canEdit" placeholder="请输入" />
</a-form-item>
<a-form-item label="英文名称" name="appNameEn">
<!-- required="true" -->
<a-input size="small" v-model:value.trim="data.appNameEn" :disabled="canEdit" placeholder="请输入" />
</a-form-item>
<a-form-item label="状态" name="status">
<a-select
size="small"
v-model:value="data.status"
:options="statusOptions"
:showArrow="true"
:disabled="canEdit"
placeholder="请选择"
/>
</a-form-item>
<a-form-item label="认真源">
<a-select
size="small"
v-model:value="data.authencationSource"
:options="hrcOptions"
:showArrow="true"
:disabled="canEdit"
placeholder="请选择"
/>
</a-form-item>
<a-form-item label="机构认证源">
<a-select
size="small"
v-model:value="data.orgSourceType"
:options="icsOptions"
:showArrow="true"
:disabled="canEdit"
placeholder="请选择"
/>
</a-form-item>
<a-form-item label="应用描述">
<a-textarea v-model:value="data.textValue" placeholder="" :rows="4" />
</a-form-item>
</a-form>
</a-modal>
</template>
<script lang="ts" src="./addModal.ts"></script>
<style lang="less" scoped>
:deep(.bond-info-modal) {
width: 800px !important;
.ant-modal-body {
height: 500px;
overflow: hidden;
}
}
.card-item {
width: 100%;
padding: 10px 0;
& > p {
padding-left: 10px;
border-left: 3px solid @primary-color;
}
:deep(.ant-form-item-label) {
width: 110px;
label {
height: 100%;
}
}
.upload-form {
:deep(.ant-form-item-label) {
width: auto;
label {
height: 100%;
}
}
}
.upload-wrap {
display: flex;
width: 60%;
:deep(.ant-input) {
margin-right: 10px;
}
}
}
</style>
channelManage
channelManage.ts
import { defineComponent, ref, reactive, onMounted, toRefs } from 'vue';
import { messageError, modalConfirmBoolean } from '@/utils/antdUtils';
import VGrid from '@/components/VGrid/VGrid';
import addModal from './addModal/addModal.vue';
// 列表查询 修改 新增 导入(表格) 激活(修改状态)
import { appQuery, appModify, appInsert, importAppId, appIdUpdateStatus } from '@/api/generate/other_api';
// import { RETURN_SUCCEED } from '@/types/Contant';
import { VXETable, VxeTableInstance, VxeTableEvents } from 'vxe-table';
import { Button } from 'vxe-table';
import ImportComponent from '@/components/ImportComponent/ImportComponent';
import { message, UploadChangeParam } from 'ant-design-vue';
import { UploadOutlined } from '@ant-design/icons-vue';
import { FileData } from 'yapi-to-typescript';
import Icon, { SearchOutlined, PlusOutlined, DeleteOutlined, EditOutlined, DownloadOutlined } from '@ant-design/icons-vue';
export default defineComponent({
components: {
VGrid,
addModal,
Button,
SearchOutlined,
PlusOutlined,
DeleteOutlined,
EditOutlined,
DownloadOutlined,
Icon,
},
setup() {
const addModal = ref();
const buttonDisable = ref(true);
const queryName = ref<string>('');
const xGrid = ref({} as VxeTableInstance); //表格
const fileUrl = ref('');
const fileList = ref([]);
const seleteActiveData = ref();
const getStatus = ref('');
const getappId = ref('');
//表格数据
const gridOptions = reactive<any>({
border: true,
showOverflow: true,
loading: false,
columns: [
// { type: 'checkbox', width: 40 },
{ field: 'appId', title: '应用ID', width: 80 },
{ field: 'appName', title: '应用名称' },
{ field: 'appNameEn', title: '英文名称' },
{ field: 'authencationSource', title: '应用描述' },
{ field: 'status', title: '状态' },
{ field: 'creater', title: '操作人' },
{ field: 'createdDate', title: '操作时间' },
{ title: '操作', slots: { default: 'operations' }, width: 350, fixed: 'right' },
],
data: <any>[],
});
//请求表格数据
// 接口查询数据
const formSearch = reactive({
appId: '',
appName: '',
appNameEn: '',
status: '',
creater: '',
createdDate: '',
});
const queryTableList = async (): Promise<void> => {
try {
const res: any = await appQuery(formSearch);
console.log(res, 'ewewewrewwe'); //data,msg,code
console.log(res.data, 'ew1ew1ew1'); //2条数据
console.log(res.data.data, 'ew2ew2ew2'); //undefined
gridOptions.data = res.data;
} catch (error) {
messageError(error);
}
};
// 导入接口
const beforeUpload = (file: any) => {
console.log(file, '文件');
const fileData = new FileData(file);
// 导入
importAppId({
appId: '',
file: fileData,
})
.then((t) => {
console.log(t.data, '导入');
})
.catch((e) => {
console.log(e, '上传失败');
});
};
//监听导入
const handleChange = (info: UploadChangeParam) => {
console.log(info, '文件信息', typeof info.file);
if (info.file.status !== 'uploading') {
console.log(info.file, info.fileList);
}
if (info.file.status === 'done') {
message.success(`${info.file.name} file uploaded successfully`);
} else if (info.file.status === 'error') {
message.error(`${info.file.name} file upload failed.`);
}
};
//新增或者是修改打开弹框
const addOrEditOperation = (data: string) => {
// const tableChecked = VGrid.value;
// // const records = tableChecked.getCheckboxRecords();
// if (records.length !== 1) buttonDisable.value = false;
console.log(data, '1233');
if (data === 'add') {
// tableChecked.clearCheckboxRow();
buttonDisable.value = true;
addModal.value.showModal(data);
} else {
addModal.value.showModal(data);
}
};
//复选框操作
// const stopOrStartOperation = reactive({
// records: <any>[], //复选框选中
// selectTable: () => {
// const $grid = xGrid.value;
// console.log($grid.getCheckboxRecords()); // 1
// stopOrStartOperation.records = $grid.getCheckboxRecords();
// // stopOrStartOperation.isOverEndTimeList = stopOrStartOperation.records.filter((item: any) => {
// // console.log(item);
// // const date = new Date(Date.parse(item.endTime.replace(/-/g, '/')));
// // const endDate = date.getTime(); //截止时间
// // const timestamp = new Date().getTime();
// // return endDate < timestamp;
// // });
// // if (stopOrStartOperation.isOverEndTimeList.length === 0) {
// // stopOrStartOperation.canStart = false;
// // } else {
// // stopOrStartOperation.canStart = true;
// // }
// },
// });
//新增一行或编辑修改数据
const handleData = (data: any, editOrAdd: boolean) => {
//新增
console.log(editOrAdd); //true
if (editOrAdd) {
// gridOptions.data = [...gridOptions.data, data];
const formSearch = reactive({
...data,
appDesc: '',
authencationSourceId: '',
});
const res: any = appInsert(formSearch);
if (res.code == 200) {
console.log('新增成功');
queryTableList();
}
} else {
//编辑
// const index = gridOptions.data.findIndex((item: { id: any }) => item.id === data.id);
// gridOptions.data?.splice(index, 1, data);
const userData = JSON.parse(localStorage.getItem('memoryCache') || '{}') || {};
console.log(userData['UserMemoryCache-loginData'].token);
const formSearch = reactive({
...data,
token: userData['UserMemoryCache-loginData'].token,
});
const res: any = appModify(formSearch);
if (res.code == 200) {
console.log('修改成功');
queryTableList();
}
}
};
//勾选事件,禁用按钮
// const selectChangeEvent: VxeTableEvents.CheckboxChange = () => {
// const $table = xGrid.value;
// const records = $table.getCheckboxRecords();
// seleteActiveData.value = records;
// if (records.length !== 0) buttonDisable.value = false;
// else {
// buttonDisable.value = true;
// }
// console.log(JSON.parse(JSON.stringify(records)), '789');
// const shuju = JSON.parse(JSON.stringify(records))[0];
// console.log(shuju);
// getStatus.value = shuju.status;
// getappId.value = shuju.appId;
// console.log(getStatus.value);
// console.log(getappId.value);
// console.log(shuju.appId, '79879779');
// console.log(shuju.status, '3444444444');
// };
//激活
const activation = (row: string) => {
// 导入
// console.log(seleteActiveData, '68686');
// console.log(seleteActiveData.value, '797997');
const rowData = JSON.parse(JSON.stringify(row));
const stauts = rowData.status;
const appId = rowData.appId;
appIdUpdateStatus({
stauts,
appId,
})
.then((t) => {
queryTableList();
console.log(t.data, '激活');
})
.catch((e) => {
console.log(e, '激活失败');
});
console.log('激活');
};
// stauts: '1',
// id: seleteActiveData.value[0],
// 多条勾选
// const selectAllChangeEvent: VxeTableEvents.CheckboxAll = () => {
// const $table = xGrid.value;
// const records = $table.getCheckboxRecords();
// buttonDisable.value = true;
// };
//编辑事件
const editRowEvent = async (row: any) => {
addModal.value.showModal('edit', row);
};
//查询
const onSearch = (value: string) => {
if (value) {
gridOptions.data = gridOptions.data?.filter((item: { appId: string | string[] }) => item.appId.includes(value));
} else {
queryTableList();
}
};
//删除
const removeRowEvent = async ({ id }: { id: number | string }) => {
console.log(111);
const isRemove = await modalConfirmBoolean('提示', '您确定要删除该数据?');
// 确认删除
if (isRemove) {
const deleteIndex = gridOptions.data?.findIndex((item: { id: string | number }) => item.id === id); // 可选链操作符 xxxx?.xxxxx
if (deleteIndex !== -1) {
gridOptions.data.splice(deleteIndex, 1);
gridOptions.data = [...gridOptions.data];
}
}
//勾选事件,禁用按钮
// const selectChangeEvent: VxeTableEvents.CheckboxChange = () => {
// const $table = xGrid.value;
// const records = $table.getCheckboxRecords();
// if (records.length === 1) buttonDisable.value = false;
// else {
// buttonDisable.value = true;
// }
// };
// const selectAllChangeEvent: VxeTableEvents.CheckboxAll = () => {
// const $table = xGrid.value;
// const records = $table.getCheckboxRecords();
// buttonDisable.value = true;
// };
// const type = await VXETable.modal.confirm('您确定要删除该数据?');
// const $grid = xGrid.value;
// console.log('删除数据', $grid, row);
// const deleteIndex = gridOptions.data?.findIndex((item) => item.id === row.id);
// if ($grid) {
// if (type === 'confirm') {
// gridOptions.data.splice(deleteIndex, 1);
// gridOptions.data = [...gridOptions.data];
// }
// }
};
//点击渠道名称查看信息弹框
const cellClickEvent: VxeTableEvents.CellClick = ({ row, column }) => {
if (column.property === 'appId') {
addModal.value.showModal('edit', row, false);
}
};
onMounted(() => {
queryTableList();
});
return {
fileUrl,
VGrid,
gridOptions,
editRowEvent,
removeRowEvent,
addModal,
buttonDisable,
addOrEditOperation,
activation,
xGrid,
beforeUpload,
// selectChangeEvent,
handleData,
fileList,
seleteActiveData,
onSearch,
queryName,
cellClickEvent,
handleChange,
// ...toRefs(stopOrStartOperation),
};
},
});
channelManage.vue
<template>
<div class="channel-container">
<!-- 头部 -->
<div class="channel-header">
<span class="channel-name">应用名称</span>
<a-input-search
placeholder="请输入内容"
style="width: 200px"
type="text"
enter-button="查询"
v-model:value="queryName"
size="small"
showSearch
@search="onSearch"
>
</a-input-search>
<a-button @click="addOrEditOperation('add')" style="margin: 0px 10px 0px 10px" type="primary" size="small"
><PlusOutlined />新增</a-button
>
<!-- 导入 -->
<a-upload
v-model:file-list="fileList"
name="file"
:beforeUpload="beforeUpload"
action="http://127.0.0.1:8000/mock/85/uim-service/app/import/{appId}"
@change="handleChange"
:data="{ appId: '' }"
>
<a-button size="small" type="primary"><DownloadOutlined />导入</a-button>
</a-upload>
<!-- <a-button @click="activation" style="margin-left: 10px" type="primary" :disabled="buttonDisable" size="small"
>激活</a-button
> -->
<!-- <ImportComponent ref="ImportComponent" v-model:fileUrl="fileUrl">导入</ImportComponent> -->
</div>
<add-modal ref="addModal" @handleData="handleData"></add-modal>
<!-- 表格 -->
<v-grid ref="xGrid" :vGridOptions="gridOptions" :total="10" style="height: calc(100% - 44px)" @cell-click="cellClickEvent">
<template #operations="{ row }">
<span class="operate-button" @click="editRowEvent(row)"><EditOutlined />编辑</span>
<span class="operate-button" @click="removeRowEvent(row)"><DeleteOutlined />删除</span>
<span @click="activation(row)" class="operate-button topBtnStyle">激活</span>
</template>
</v-grid>
</div>
</template>
<script lang="ts" src="./ChannelManage.ts"></script>
<style lang="less" scoped>
.channel-container {
height: 800px;
overflow: auto;
}
.channel-header {
margin: 10px 10px;
.channel-name {
margin: 0 20px 0 20px;
}
}
:deep(.ant-btn-sm) {
height: 22px;
}
.operate-button {
margin: 10px;
color: #189fff;
cursor: pointer;
}
:deep(.vxe-body--column.col_6) {
color: #189fff;
cursor: pointer;
}
</style>