AaronWu
8 months ago
18 changed files with 1176 additions and 51 deletions
@ -0,0 +1,179 @@ |
|||||
|
<template> |
||||
|
<div class="knowledge-base"> |
||||
|
<a-row :gutter="16"> |
||||
|
<!-- 左侧目录树 --> |
||||
|
<a-col :span="6"> |
||||
|
<a-card class="tree-card"> |
||||
|
<template #title> |
||||
|
<span class="card-title"> |
||||
|
<folder-outlined /> 知识库目录 |
||||
|
</span> |
||||
|
</template> |
||||
|
<a-tree |
||||
|
v-model:selectedKeys="selectedKeys" |
||||
|
v-model:expandedKeys="expandedKeys" |
||||
|
:tree-data="treeData" |
||||
|
@select="onSelect" |
||||
|
/> |
||||
|
</a-card> |
||||
|
</a-col> |
||||
|
|
||||
|
<!-- 右侧内容区 --> |
||||
|
<a-col :span="18"> |
||||
|
<a-card class="content-card"> |
||||
|
<template #title> |
||||
|
<span class="card-title"> |
||||
|
<book-outlined /> 知识库内容 |
||||
|
</span> |
||||
|
</template> |
||||
|
|
||||
|
<!-- 快捷操作区域 --> |
||||
|
<div class="quick-actions"> |
||||
|
<a-space> |
||||
|
<a-button type="primary" v-for="action in quickActions" :key="action.title" @click="action.onClick"> |
||||
|
<template #icon><component :is="action.icon" /></template> |
||||
|
{{ action.title }} |
||||
|
</a-button> |
||||
|
</a-space> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 内容展示区域 --> |
||||
|
<div class="content-area"> |
||||
|
<template v-if="selectedKeys.length"> |
||||
|
<!-- 这里可以根据选中的目录显示具体内容 --> |
||||
|
<div class="selected-content"> |
||||
|
已选择: {{ selectedKeys[0] }} |
||||
|
</div> |
||||
|
</template> |
||||
|
<template v-else> |
||||
|
<a-empty description="请选择左侧目录" /> |
||||
|
</template> |
||||
|
</div> |
||||
|
</a-card> |
||||
|
</a-col> |
||||
|
</a-row> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script setup lang="ts"> |
||||
|
import { ref } from 'vue'; |
||||
|
import { |
||||
|
FolderOutlined, |
||||
|
BookOutlined, |
||||
|
FileTextOutlined, |
||||
|
TeamOutlined, |
||||
|
SettingOutlined, |
||||
|
PlusOutlined, |
||||
|
EditOutlined, |
||||
|
DeleteOutlined, |
||||
|
ExportOutlined |
||||
|
} from '@ant-design/icons-vue'; |
||||
|
|
||||
|
// 目录树数据 |
||||
|
const treeData = ref([ |
||||
|
{ |
||||
|
title: '产品文档', |
||||
|
key: '1', |
||||
|
children: [ |
||||
|
{ title: '使用指南', key: '1-1' }, |
||||
|
{ title: '常见问题', key: '1-2' }, |
||||
|
], |
||||
|
}, |
||||
|
{ |
||||
|
title: '技术文档', |
||||
|
key: '2', |
||||
|
children: [ |
||||
|
{ title: 'API文档', key: '2-1' }, |
||||
|
{ title: '开发规范', key: '2-2' }, |
||||
|
], |
||||
|
}, |
||||
|
]); |
||||
|
|
||||
|
// 树选择状态 |
||||
|
const selectedKeys = ref<string[]>([]); |
||||
|
const expandedKeys = ref<string[]>(['1', '2']); |
||||
|
|
||||
|
// 功能卡片数据 |
||||
|
const featureCards = ref([ |
||||
|
{ |
||||
|
title: '文档管理', |
||||
|
description: '集中管理所有知识文档', |
||||
|
icon: FileTextOutlined, |
||||
|
color: '#1890ff', |
||||
|
}, |
||||
|
{ |
||||
|
title: '团队协作', |
||||
|
description: '支持多人协同编辑', |
||||
|
icon: TeamOutlined, |
||||
|
color: '#52c41a', |
||||
|
}, |
||||
|
{ |
||||
|
title: '系统设置', |
||||
|
description: '自定义知识库配置', |
||||
|
icon: SettingOutlined, |
||||
|
color: '#722ed1', |
||||
|
}, |
||||
|
]); |
||||
|
|
||||
|
// 快捷操作按钮 |
||||
|
const quickActions = ref([ |
||||
|
{ |
||||
|
title: '新建文档', |
||||
|
icon: PlusOutlined, |
||||
|
onClick: () => console.log('新建文档'), |
||||
|
}, |
||||
|
{ |
||||
|
title: '编辑文档', |
||||
|
icon: EditOutlined, |
||||
|
onClick: () => console.log('编辑文档'), |
||||
|
}, |
||||
|
{ |
||||
|
title: '删除文档', |
||||
|
icon: DeleteOutlined, |
||||
|
onClick: () => console.log('删除文档'), |
||||
|
}, |
||||
|
{ |
||||
|
title: '导出文档', |
||||
|
icon: ExportOutlined, |
||||
|
onClick: () => console.log('导出文档'), |
||||
|
}, |
||||
|
]); |
||||
|
|
||||
|
// 树节点选择事件 |
||||
|
const onSelect = (selectedKeys: string[], info: any) => { |
||||
|
console.log('selected', selectedKeys, info); |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="less" scoped> |
||||
|
.knowledge-base { |
||||
|
padding: 24px; |
||||
|
background: linear-gradient(135deg, #f5f7fa 0%, #e4e7eb 100%); |
||||
|
min-height: 100vh; |
||||
|
|
||||
|
.tree-card, |
||||
|
.content-card { |
||||
|
min-height: calc(100vh - 50px); |
||||
|
background: #fff; |
||||
|
border-radius: 8px; |
||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); |
||||
|
|
||||
|
.quick-actions { |
||||
|
margin-bottom: 16px; |
||||
|
padding: 16px 0; |
||||
|
border-bottom: 1px solid #f0f0f0; |
||||
|
} |
||||
|
|
||||
|
.content-area { |
||||
|
padding: 16px 0; |
||||
|
min-height: 300px; |
||||
|
|
||||
|
.selected-content { |
||||
|
padding: 16px; |
||||
|
background: #fafafa; |
||||
|
border-radius: 4px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,62 @@ |
|||||
|
import type { TableColumn } from '@/components/core/dynamic-table'; |
||||
|
import { DictEnum } from '@/enums/dictEnum'; |
||||
|
import { getDictionaryByTypeName } from '@/utils/dict'; |
||||
|
export type TableListItem = API.KnowledgeBaseType; |
||||
|
export type TableColumnItem = TableColumn<TableListItem>; |
||||
|
|
||||
|
// const questionTypeList = await getDictionaryByTypeName(DictEnum.QUESTION_TYPE);
|
||||
|
|
||||
|
// 数据项类型
|
||||
|
// export type ListItemType = typeof tableData[number];
|
||||
|
// 使用TableColumn<ListItemType> 将会限制dataIndex的类型，但换来的是dataIndex有类型提示
|
||||
|
export const baseColumns: TableColumnItem[] = [ |
||||
|
{ |
||||
|
title: '标题', |
||||
|
align: 'center', |
||||
|
dataIndex: 'title', |
||||
|
// sorter: true,
|
||||
|
width: 150, |
||||
|
resizable: true, |
||||
|
formItemProps: { |
||||
|
defaultValue: '', |
||||
|
required: false, |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
title: '描述', |
||||
|
align: 'center', |
||||
|
dataIndex: 'description', |
||||
|
width: 150, |
||||
|
resizable: true, |
||||
|
formItemProps: { |
||||
|
defaultValue: '', |
||||
|
required: false, |
||||
|
}, |
||||
|
}, |
||||
|
|
||||
|
{ |
||||
|
title: '标签', |
||||
|
align: 'center', |
||||
|
dataIndex: 'tags', |
||||
|
width: 200, |
||||
|
hideInSearch: true, |
||||
|
customRender: ({ record }) => { |
||||
|
const tags = record.tags?.join(', '); |
||||
|
return <div>{{ tags }}</div>; |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
title: '创建时间', |
||||
|
align: 'center', |
||||
|
width: 200, |
||||
|
dataIndex: 'createTime', |
||||
|
formItemProps: { |
||||
|
defaultValue: '', |
||||
|
required: false, |
||||
|
component: 'RangePicker', |
||||
|
componentProps: { |
||||
|
valueFormat: 'YYYY-MM-DD', |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
]; |
||||
@ -0,0 +1,32 @@ |
|||||
|
export const stateTypeList: any = [ |
||||
|
// Init(0,"初始化"),
|
||||
|
// Back(1,"退回"),
|
||||
|
// Develop(2,"开发"),
|
||||
|
// Test(3,"测试"),
|
||||
|
// End(4,"结束"),
|
||||
|
{ |
||||
|
label: '初始化', |
||||
|
value: 0, |
||||
|
color: '#f50', |
||||
|
}, |
||||
|
{ |
||||
|
label: '退回', |
||||
|
value: 1, |
||||
|
color: '#2db7f5', |
||||
|
}, |
||||
|
{ |
||||
|
label: '开发', |
||||
|
value: 2, |
||||
|
color: '#87d068', |
||||
|
}, |
||||
|
{ |
||||
|
label: '测试', |
||||
|
value: 3, |
||||
|
color: '#108ee9', |
||||
|
}, |
||||
|
{ |
||||
|
label: '结束', |
||||
|
value: 4, |
||||
|
color: '#f50', |
||||
|
}, |
||||
|
]; |
||||
@ -0,0 +1,156 @@ |
|||||
|
<!-- |
||||
|
功能：功能描述 |
||||
|
作者：Aaron |
||||
|
时间：2023年07月31日 11:51:23 |
||||
|
版本：v1.0 |
||||
|
修改记录： |
||||
|
修改内容： |
||||
|
修改人员： |
||||
|
修改时间： |
||||
|
--> |
||||
|
<template> |
||||
|
<div class="bg-[#fff] p-5"> |
||||
|
<a-spin :spinning="loading"> |
||||
|
<div class="my-3"> |
||||
|
<a-steps :current="current" size="small"> |
||||
|
<a-step title="初始化"> |
||||
|
<template #icon> |
||||
|
<SvgIcon :size="22" name="init" /> |
||||
|
</template> |
||||
|
</a-step> |
||||
|
|
||||
|
<a-step title="退回"> |
||||
|
<template #icon> |
||||
|
<SvgIcon :size="24" name="back" /> |
||||
|
</template> |
||||
|
</a-step> |
||||
|
<a-step title="开发"> |
||||
|
<template #icon> |
||||
|
<SvgIcon :size="24" name="dev" /> |
||||
|
</template> |
||||
|
</a-step> |
||||
|
<a-step title="测试"> |
||||
|
<template #icon> |
||||
|
<SvgIcon :size="24" name="test" /> |
||||
|
</template> |
||||
|
</a-step> |
||||
|
<a-step title="结束"> |
||||
|
<template #icon> |
||||
|
<SvgIcon :size="24" name="end" /> |
||||
|
</template> |
||||
|
</a-step> |
||||
|
</a-steps> |
||||
|
</div> |
||||
|
|
||||
|
<a-tabs default-active-key="1"> |
||||
|
<a-tab-pane key="1" tab="基础信息"> |
||||
|
<SchemaForm> |
||||
|
<template #solution="{ formModel, field }"> |
||||
|
<div class="ql-box"> |
||||
|
<QuillEditor |
||||
|
theme="snow" |
||||
|
v-model:content="formModel[field]" |
||||
|
:options="editorOptions" |
||||
|
:readOnly="true" |
||||
|
contentType="html" |
||||
|
/> |
||||
|
</div> |
||||
|
</template> |
||||
|
</SchemaForm> |
||||
|
</a-tab-pane> |
||||
|
<a-tab-pane key="2" tab="处理历史"> |
||||
|
<a-steps progress-dot :current="historyList.length - 1" direction="vertical"> |
||||
|
<a-step |
||||
|
v-for="(item, index) in historyList" |
||||
|
:key="index" |
||||
|
:title="item.title" |
||||
|
:description="item.remark" |
||||
|
/> |
||||
|
</a-steps> |
||||
|
</a-tab-pane> |
||||
|
</a-tabs> |
||||
|
</a-spin> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script lang="ts" setup> |
||||
|
import { QuillEditor } from '@vueup/vue-quill'; |
||||
|
import '@vueup/vue-quill/dist/vue-quill.snow.css'; |
||||
|
import { useForm } from '@/components/core/schema-form'; |
||||
|
import { getEditFormSchema } from './formSchemas'; |
||||
|
import { useRoute } from 'vue-router'; |
||||
|
import { onMounted, ref } from 'vue'; |
||||
|
import { findOneById } from '@/api/issue'; |
||||
|
import { SvgIcon } from '@/components/basic/svg-icon'; |
||||
|
import { stateTypeList } from './data'; |
||||
|
const route = useRoute(); |
||||
|
const editorOptions = ref({ |
||||
|
theme: 'snow', |
||||
|
modules: { |
||||
|
toolbar: [ |
||||
|
[{ header: '1' }, { header: '2' }, { font: [] }], |
||||
|
[{ list: 'ordered' }, { list: 'bullet' }], |
||||
|
['bold', 'italic', 'underline'], |
||||
|
['link', 'image'], // 添加图片按钮 |
||||
|
], |
||||
|
}, |
||||
|
}); |
||||
|
const loading = ref(false); |
||||
|
|
||||
|
const historyList = ref< |
||||
|
Array<{ |
||||
|
state: number; |
||||
|
remark: string; |
||||
|
title?: string; |
||||
|
}> |
||||
|
>([]); |
||||
|
|
||||
|
const current = ref(0); |
||||
|
|
||||
|
const { id } = route.query; |
||||
|
|
||||
|
const [SchemaForm, formRef] = useForm({ |
||||
|
labelWidth: 150, |
||||
|
schemas: getEditFormSchema({}, true), |
||||
|
showActionButtonGroup: false, |
||||
|
actionColOptions: { |
||||
|
span: 24, |
||||
|
}, |
||||
|
submitButtonOptions: { |
||||
|
text: '保存', |
||||
|
}, |
||||
|
disabled: true, |
||||
|
}); |
||||
|
|
||||
|
onMounted(async () => { |
||||
|
loading.value = true; |
||||
|
const res = await findOneById({ id: id as string }); |
||||
|
loading.value = false; |
||||
|
|
||||
|
if (res?.files && Array.isArray(res.files) && res.files.length) { |
||||
|
res.files = res.files.map((e) => { |
||||
|
return { |
||||
|
name: e.originalFilename, |
||||
|
url: e.url, |
||||
|
id: e.id, |
||||
|
}; |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
if (res.historys && Array.isArray(res.historys) && res.historys.length) { |
||||
|
historyList.value = res.historys.map((e) => { |
||||
|
return { |
||||
|
state: e.state, |
||||
|
remark: `${e.createUserName}于${e.createTime} : ${e.remark}`, |
||||
|
title: stateTypeList.find((item) => item.value === e.state)?.label, |
||||
|
}; |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
current.value = res?.state; |
||||
|
|
||||
|
formRef?.setFieldsValue(res); |
||||
|
formRef?.clearValidate(); |
||||
|
}); |
||||
|
</script> |
||||
|
<style lang="less" scoped></style> |
||||
@ -0,0 +1,83 @@ |
|||||
|
import type { FormSchema } from '@/components/core/schema-form/'; |
||||
|
import { TableListItem } from './columns'; |
||||
|
import { commonUpload } from '@/api/upload'; |
||||
|
import { message, Button } from 'ant-design-vue'; |
||||
|
import { getFileExtension } from '@/utils/fileUtils'; |
||||
|
import { UploadOutlined } from '@ant-design/icons-vue'; |
||||
|
import { stateTypeList } from './data'; |
||||
|
import { DictEnum } from '@/enums/dictEnum'; |
||||
|
import { getDictionaryByTypeName } from '@/utils/dict'; |
||||
|
import { fetchProdList, fetchVersionPageList } from '@/api/prodVersion'; |
||||
|
const questionTypeList = await getDictionaryByTypeName(DictEnum.QUESTION_TYPE); |
||||
|
// 编辑页字段
|
||||
|
export const getEditFormSchema: ( |
||||
|
row?: Partial<TableListItem>, |
||||
|
isDetail?: boolean, |
||||
|
) => FormSchema[] = (record = {}, isDetail = false) => { |
||||
|
console.log('questionTypeList: ', questionTypeList); |
||||
|
|
||||
|
return [ |
||||
|
{ |
||||
|
field: 'title', |
||||
|
component: 'Input', |
||||
|
componentProps: { |
||||
|
showCount: true, |
||||
|
maxlength: 150, |
||||
|
}, |
||||
|
label: '问题标题', |
||||
|
colProps: { |
||||
|
span: 12, |
||||
|
}, |
||||
|
rules: [{ required: true }], |
||||
|
}, |
||||
|
{ |
||||
|
field: 'versionId', |
||||
|
component: 'Select', |
||||
|
componentProps: { |
||||
|
options: [], |
||||
|
}, |
||||
|
label: '版本', |
||||
|
colProps: { |
||||
|
span: 12, |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
field: 'description', |
||||
|
component: 'InputTextArea', |
||||
|
componentProps: { |
||||
|
rows: 4, |
||||
|
placeholder: '请输入问题描述', |
||||
|
showCount: true, |
||||
|
maxlength: 150, |
||||
|
}, |
||||
|
label: '问题描述', |
||||
|
colProps: { |
||||
|
span: 24, |
||||
|
}, |
||||
|
rules: [{ required: true }], |
||||
|
}, |
||||
|
{ |
||||
|
label: '解决方案', |
||||
|
field: 'solution', |
||||
|
colProps: { |
||||
|
span: 24, |
||||
|
}, |
||||
|
// vShow: !isDetail,
|
||||
|
// rules: [{ required: true, type: 'array' }],
|
||||
|
slot: 'solution', |
||||
|
}, |
||||
|
] as any; |
||||
|
}; |
||||
|
|
||||
|
export const getFlowFormSchema: (row?: Partial<TableListItem>) => FormSchema[] = (record = {}) => { |
||||
|
return [ |
||||
|
{ |
||||
|
field: 'remark', |
||||
|
component: 'InputTextArea', |
||||
|
label: '文字补充内容', |
||||
|
colProps: { |
||||
|
span: 24, |
||||
|
}, |
||||
|
}, |
||||
|
]; |
||||
|
}; |
||||
@ -0,0 +1,520 @@ |
|||||
|
<!-- |
||||
|
功能：功能描述 |
||||
|
作者：Aaron.Wu |
||||
|
时间：2023年05月25日 17:00:26 |
||||
|
版本：v1.0 |
||||
|
修改记录： |
||||
|
修改内容： |
||||
|
修改人员： |
||||
|
修改时间： |
||||
|
--> |
||||
|
<template> |
||||
|
<DynamicTable |
||||
|
size="small" |
||||
|
showIndex |
||||
|
headerTitle="问题工单列表" |
||||
|
titleTooltip="" |
||||
|
:data-request="loadData" |
||||
|
:columns="columns" |
||||
|
row-key="id" |
||||
|
@resize-column="handleResizeColumn" |
||||
|
:row-selection="rowSelection" |
||||
|
:scroll="{ x: '100vw' }" |
||||
|
> |
||||
|
<template v-if="isCheckRows" #title> |
||||
|
<Alert class="w-full" type="info" show-icon> |
||||
|
<template #message> |
||||
|
已选 {{ isCheckRows }} 项 |
||||
|
<a-button type="link" @click="rowSelection.selectedRowKeys = []">取消选择</a-button> |
||||
|
</template> |
||||
|
</Alert> |
||||
|
</template> |
||||
|
<template #toolbar> |
||||
|
<a-button type="primary" @click="handleAdd">新增</a-button> |
||||
|
<a-button |
||||
|
type="danger" |
||||
|
:disabled="!isCheckRows" |
||||
|
@click="delRowConfirm(rowSelection.selectedRowKeys)" |
||||
|
> |
||||
|
<DeleteOutlined /> 删除 |
||||
|
</a-button> |
||||
|
</template> |
||||
|
</DynamicTable> |
||||
|
<DraggableModal |
||||
|
v-model:visible="visible" |
||||
|
:width="700" |
||||
|
:bodyStyle="{ |
||||
|
height: '70vh', |
||||
|
}" |
||||
|
:force-render="true" |
||||
|
:title="`${curRecord.id ? '编辑' : '新增'}问题工单`" |
||||
|
@ok="handleOk" |
||||
|
@cancel="handleCancel" |
||||
|
> |
||||
|
<SchemaForm> |
||||
|
<template #solution="{ formModel, field }"> |
||||
|
<div class="ql-box"> |
||||
|
<QuillEditor |
||||
|
theme="snow" |
||||
|
v-model:content="formModel[field]" |
||||
|
:options="editorOptions" |
||||
|
contentType="html" |
||||
|
/> |
||||
|
</div> |
||||
|
</template> |
||||
|
</SchemaForm> |
||||
|
</DraggableModal> |
||||
|
</template> |
||||
|
|
||||
|
<script lang="tsx" setup> |
||||
|
import { QuillEditor } from '@vueup/vue-quill'; |
||||
|
import '@vueup/vue-quill/dist/vue-quill.snow.css'; |
||||
|
import { type TableListItem, baseColumns } from './columns'; |
||||
|
import { useTable, type OnChangeCallbackParams } from '@/components/core/dynamic-table'; |
||||
|
import { |
||||
|
fetchIssuePageList, |
||||
|
createIssue, |
||||
|
updateIssue, |
||||
|
deleteIssueById, |
||||
|
deleteBatchIssueById, |
||||
|
findOneById, |
||||
|
updateIssueState, |
||||
|
addToknowledge, |
||||
|
} from '@/api/issue'; |
||||
|
import { computed, nextTick, ref } from 'vue'; |
||||
|
import { Modal, message, Alert } from 'ant-design-vue'; |
||||
|
import { useRouter } from 'vue-router'; |
||||
|
import { useFormModal } from '@/hooks/useModal/index'; |
||||
|
import { getEditFormSchema, getFlowFormSchema } from './formSchemas'; |
||||
|
import { ExclamationCircleOutlined, DeleteOutlined } from '@ant-design/icons-vue'; |
||||
|
import { stateTypeList } from './data'; |
||||
|
import { fetchVersionPageList } from '@/api/prodVersion'; |
||||
|
import { DraggableModal } from '@/components/core/draggable-modal'; |
||||
|
import { useForm } from '@/components/core/schema-form'; |
||||
|
|
||||
|
defineOptions({ |
||||
|
name: 'issue', |
||||
|
}); |
||||
|
|
||||
|
const router = useRouter(); |
||||
|
|
||||
|
const curRecord = ref<Partial<TableListItem>>({}); |
||||
|
const visible = ref(false); |
||||
|
|
||||
|
const editorOptions = ref({ |
||||
|
theme: 'snow', |
||||
|
modules: { |
||||
|
toolbar: [ |
||||
|
[{ header: '1' }, { header: '2' }, { font: [] }], |
||||
|
[{ list: 'ordered' }, { list: 'bullet' }], |
||||
|
['bold', 'italic', 'underline'], |
||||
|
['link', 'image'], // 添加图片按钮 |
||||
|
], |
||||
|
}, |
||||
|
}); |
||||
|
|
||||
|
const [showModal] = useFormModal(); |
||||
|
|
||||
|
const [showFlowModal] = useFormModal(); |
||||
|
|
||||
|
const [SchemaForm, formRef] = useForm({ |
||||
|
labelWidth: 100, |
||||
|
labelAlign: 'right', |
||||
|
schemas: getEditFormSchema(curRecord.value), |
||||
|
showActionButtonGroup: false, |
||||
|
actionColOptions: { |
||||
|
span: 24, |
||||
|
}, |
||||
|
submitButtonOptions: { |
||||
|
text: '保存', |
||||
|
}, |
||||
|
}); |
||||
|
|
||||
|
const handleOk = async () => { |
||||
|
const values = await formRef?.validate(); |
||||
|
if (values) { |
||||
|
console.log('values: ', values); |
||||
|
values.id = curRecord.value.id; |
||||
|
|
||||
|
if (values.files && Array.isArray(values.files) && values.files.length) { |
||||
|
values.files = values.files.map((e) => { |
||||
|
if (e.response) { |
||||
|
return { |
||||
|
name: e.name, |
||||
|
url: e.response.url, |
||||
|
id: e.response.id, |
||||
|
}; |
||||
|
} |
||||
|
return { |
||||
|
...e, |
||||
|
}; |
||||
|
}); |
||||
|
values.fileIds = values.files.map((e) => e.id).join(','); |
||||
|
} |
||||
|
|
||||
|
await (values.id ? updateIssue : createIssue)(values); |
||||
|
message.success(`${values.id ? '编辑' : '新增'}成功`); |
||||
|
visible.value = false; |
||||
|
resetFormFields(); |
||||
|
dynamicTableInstance?.reload(); |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
const handleCancel = () => { |
||||
|
visible.value = false; |
||||
|
}; |
||||
|
|
||||
|
const columns: any = [ |
||||
|
...baseColumns, |
||||
|
{ |
||||
|
title: '操作', |
||||
|
width: 100, |
||||
|
dataIndex: 'ACTION', |
||||
|
hideInSearch: true, |
||||
|
align: 'center', |
||||
|
fixed: 'right', |
||||
|
actions: ({ record }) => { |
||||
|
const { state } = record; |
||||
|
return [ |
||||
|
{ |
||||
|
icon: 'searchoutlined', |
||||
|
color: '#3b82f6', |
||||
|
label: '查看', |
||||
|
onClick: () => handleView(record), |
||||
|
}, |
||||
|
{ |
||||
|
icon: 'edit', |
||||
|
color: '#3b82f6', |
||||
|
size: '15', |
||||
|
label: '修改', |
||||
|
onClick: () => handleEdit(record), |
||||
|
}, |
||||
|
|
||||
|
{ |
||||
|
icon: 'delete', |
||||
|
color: '#ec6f6f', |
||||
|
label: '删除', |
||||
|
popConfirm: { |
||||
|
title: '确定要删除吗？', |
||||
|
onConfirm: () => handleDelete(record.id), |
||||
|
}, |
||||
|
}, |
||||
|
]; |
||||
|
}, |
||||
|
}, |
||||
|
]; |
||||
|
|
||||
|
const changeState = async (record: Partial<TableListItem>, state: number) => { |
||||
|
await openFlowModal(record, state); |
||||
|
}; |
||||
|
/** |
||||
|
* @description 打开问题工单弹窗 |
||||
|
*/ |
||||
|
const openIssueModal = async (record: Partial<TableListItem> = {}, isReadOnly = false) => { |
||||
|
const [formRef] = await showModal<any>({ |
||||
|
modalProps: { |
||||
|
title: `${isReadOnly ? '查看' : record.id ? '编辑' : '新增'}问题工单`, |
||||
|
width: 700, |
||||
|
onFinish: async (values) => { |
||||
|
console.log('新增/编辑问题工单', values); |
||||
|
values.id = record.id; |
||||
|
|
||||
|
if (values.files && Array.isArray(values.files) && values.files.length) { |
||||
|
values.files = values.files.map((e) => { |
||||
|
if (e.response) { |
||||
|
return { |
||||
|
name: e.name, |
||||
|
url: e.response.url, |
||||
|
id: e.response.id, |
||||
|
}; |
||||
|
} |
||||
|
return { |
||||
|
...e, |
||||
|
}; |
||||
|
}); |
||||
|
values.fileIds = values.files.map((e) => e.id).join(','); |
||||
|
} |
||||
|
|
||||
|
await (record.id ? updateIssue : createIssue)(values); |
||||
|
message.success(`${record.id ? '编辑' : '新增'}成功`); |
||||
|
dynamicTableInstance?.reload(); |
||||
|
}, |
||||
|
footer: isReadOnly ? null : undefined, |
||||
|
}, |
||||
|
formProps: { |
||||
|
labelWidth: 100, |
||||
|
schemas: getEditFormSchema(record, isReadOnly) as any, |
||||
|
autoSubmitOnEnter: true, |
||||
|
disabled: isReadOnly, |
||||
|
}, |
||||
|
}); |
||||
|
|
||||
|
formRef?.setFieldsValue(record); |
||||
|
|
||||
|
if (record?.productId) { |
||||
|
const { data } = await fetchVersionPageList({ |
||||
|
productId: record?.productId, |
||||
|
current: 1, |
||||
|
size: 999, |
||||
|
}); |
||||
|
if (data && Array.isArray(data) && data.length) { |
||||
|
formRef?.updateSchema({ |
||||
|
field: 'versionId', |
||||
|
componentProps: { |
||||
|
options: data.map((e) => { |
||||
|
return { |
||||
|
label: e.name, |
||||
|
value: e.id, |
||||
|
}; |
||||
|
}), |
||||
|
}, |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
const openFlowModal = async (record: Partial<TableListItem> = {}, state) => { |
||||
|
const flowTitle = stateTypeList.find((item) => item.value === state)?.label; |
||||
|
const [formRef] = await showFlowModal<any>({ |
||||
|
modalProps: { |
||||
|
title: `${flowTitle}问题工单`, |
||||
|
width: 700, |
||||
|
onFinish: async (values) => { |
||||
|
await updateIssueState({ |
||||
|
id: record.id, |
||||
|
state: state, |
||||
|
...values, |
||||
|
}); |
||||
|
message.success(`${flowTitle}成功`); |
||||
|
dynamicTableInstance?.reload(); |
||||
|
}, |
||||
|
}, |
||||
|
formProps: { |
||||
|
labelWidth: 100, |
||||
|
schemas: getFlowFormSchema(record) as any, |
||||
|
autoSubmitOnEnter: true, |
||||
|
}, |
||||
|
}); |
||||
|
|
||||
|
formRef?.setFieldsValue(record); |
||||
|
}; |
||||
|
|
||||
|
const handleView = (record: TableListItem) => { |
||||
|
router.push({ |
||||
|
path: '/question/issueDetail', |
||||
|
query: { |
||||
|
id: record.id, |
||||
|
}, |
||||
|
}); |
||||
|
}; |
||||
|
|
||||
|
const resetFormFields = () => { |
||||
|
formRef?.resetFields(); |
||||
|
}; |
||||
|
|
||||
|
const openModal = () => { |
||||
|
visible.value = true; |
||||
|
formRef.clearValidate(); |
||||
|
}; |
||||
|
|
||||
|
const handleAddToKnowledge = async (record: TableListItem) => { |
||||
|
console.log('record: ', record); |
||||
|
if (!record.id) return; |
||||
|
const res = await addToknowledge({ |
||||
|
id: record.id, |
||||
|
}); |
||||
|
if (res) { |
||||
|
message.success('添加到知识库成功'); |
||||
|
dynamicTableInstance?.reload(); |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
const handleAdd = () => { |
||||
|
formRef?.setFieldsValue(curRecord.value); |
||||
|
resetFormFields(); |
||||
|
openModal(); |
||||
|
}; |
||||
|
|
||||
|
const handleEdit = async (record: TableListItem) => { |
||||
|
if (record?.id) { |
||||
|
const res = await findOneById({ |
||||
|
id: record.id, |
||||
|
}); |
||||
|
console.log('res: ', res); |
||||
|
if (res?.files && Array.isArray(res.files) && res.files.length) { |
||||
|
res.files = res.files.map((e) => { |
||||
|
return { |
||||
|
name: e.originalFilename, |
||||
|
url: e.url, |
||||
|
id: e.id, |
||||
|
}; |
||||
|
}); |
||||
|
} |
||||
|
curRecord.value = res; |
||||
|
|
||||
|
formRef?.setFieldsValue(res); |
||||
|
|
||||
|
if (res?.productId) { |
||||
|
const { data } = await fetchVersionPageList({ |
||||
|
productId: res?.productId, |
||||
|
current: 1, |
||||
|
size: 999, |
||||
|
}); |
||||
|
if (data && Array.isArray(data) && data.length) { |
||||
|
formRef?.updateSchema({ |
||||
|
field: 'versionId', |
||||
|
componentProps: { |
||||
|
options: data.map((e) => { |
||||
|
return { |
||||
|
label: e.name, |
||||
|
value: e.id, |
||||
|
}; |
||||
|
}), |
||||
|
}, |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
nextTick(() => { |
||||
|
openModal(); |
||||
|
}); |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
const handleShow = async (record: TableListItem) => { |
||||
|
openIssueModal(record, true); |
||||
|
}; |
||||
|
|
||||
|
const handleDelete = (id: string) => { |
||||
|
delRowConfirm(id); |
||||
|
}; |
||||
|
|
||||
|
/** |
||||
|
* @description 表格删除行 |
||||
|
*/ |
||||
|
const delRowConfirm = async (id: string | string[]) => { |
||||
|
Modal.confirm({ |
||||
|
title: '确定要删除所选的问题工单吗?', |
||||
|
icon: <ExclamationCircleOutlined />, |
||||
|
centered: true, |
||||
|
onOk: async () => { |
||||
|
if (Array.isArray(id)) { |
||||
|
// 多个删除 |
||||
|
await deleteBatchIssueById(id).finally(dynamicTableInstance?.reload); |
||||
|
} else { |
||||
|
await deleteIssueById({ id }).finally(dynamicTableInstance?.reload); |
||||
|
} |
||||
|
}, |
||||
|
}); |
||||
|
}; |
||||
|
|
||||
|
const [DynamicTable, dynamicTableInstance] = useTable(); |
||||
|
|
||||
|
const rowSelection = ref<any>({ |
||||
|
selectedRowKeys: [] as string[], |
||||
|
onChange: (selectedRowKeys: string[], selectedRows: TableListItem[]) => { |
||||
|
console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows); |
||||
|
rowSelection.value.selectedRowKeys = selectedRowKeys; |
||||
|
}, |
||||
|
}); |
||||
|
|
||||
|
// 是否勾选了表格行 |
||||
|
const isCheckRows = computed(() => rowSelection.value.selectedRowKeys.length); |
||||
|
|
||||
|
const loadData = async ( |
||||
|
params, |
||||
|
onChangeParams?: OnChangeCallbackParams, |
||||
|
): Promise<API.TableListResult> => { |
||||
|
console.log('params', params); |
||||
|
console.log('onChangeParams', onChangeParams); |
||||
|
// 手动设置搜索表单的搜索项 |
||||
|
// dynamicTableInstance?.getQueryFormRef()?.updateSchema?.([ |
||||
|
// { |
||||
|
// field: 'price', |
||||
|
// componentProps: { |
||||
|
// options: [ |
||||
|
// { |
||||
|
// label: '0-199', |
||||
|
// value: '0-199', |
||||
|
// }, |
||||
|
// { |
||||
|
// label: '200-999', |
||||
|
// value: '200-999', |
||||
|
// }, |
||||
|
// ], |
||||
|
// }, |
||||
|
// }, |
||||
|
// ]); |
||||
|
|
||||
|
// return new Promise((resolve) => { |
||||
|
// setTimeout(() => { |
||||
|
// resolve({ |
||||
|
// list: [ |
||||
|
// { |
||||
|
// id: '1', |
||||
|
// name: '1', |
||||
|
// state: 0, |
||||
|
// files: [ |
||||
|
// { |
||||
|
// name: '文件条款信息.xlsx', |
||||
|
// url: 'http://192.168.2.116:8089/oss/resource/2025-04-07/67f390f06f14d107a557e10f.xlsx', |
||||
|
// id: 'vc-upload-1744009547396-6', |
||||
|
// }, |
||||
|
// { |
||||
|
// name: '文件条款信息 (1).xlsx', |
||||
|
// url: 'http://192.168.2.116:8089/oss/resource/2025-04-07/67f390fc6f14d107a557e110.xlsx', |
||||
|
// id: 'vc-upload-1744009547396-8', |
||||
|
// }, |
||||
|
// ], |
||||
|
// }, |
||||
|
// ], |
||||
|
// ...params, |
||||
|
// }); |
||||
|
// }, 500); |
||||
|
// }); |
||||
|
|
||||
|
const dateRange = { |
||||
|
startDate: params.createTime |
||||
|
? params.createTime.length |
||||
|
? params.createTime[0] |
||||
|
: undefined |
||||
|
: undefined, |
||||
|
endDate: params.createTime |
||||
|
? params.createTime.length |
||||
|
? params.createTime[1] |
||||
|
: undefined |
||||
|
: undefined, |
||||
|
}; |
||||
|
|
||||
|
const res = await fetchIssuePageList({ |
||||
|
...params, |
||||
|
...dateRange, |
||||
|
current: params.page, |
||||
|
size: params.limit, |
||||
|
}); |
||||
|
console.log('res: ', res); |
||||
|
rowSelection.value.selectedRowKeys = []; |
||||
|
|
||||
|
return { |
||||
|
list: res.data.records, |
||||
|
pagination: { |
||||
|
total: Number(res.data.total), |
||||
|
...params, |
||||
|
}, |
||||
|
}; |
||||
|
}; |
||||
|
const handleResizeColumn = (w, col) => { |
||||
|
col.width = w; |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="less"> |
||||
|
.action-divider { |
||||
|
margin: 0 5px; |
||||
|
} |
||||
|
.ql-box { |
||||
|
.ql-editor { |
||||
|
height: 400px !important; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue