AaronWu
1 year ago
34 changed files with 1677 additions and 127 deletions
@ -0,0 +1,104 @@ |
|||
/* |
|||
* @Author: AaronWu 2463371514@qq.com |
|||
* @Date: 2025-04-01 09:09:04 |
|||
* @LastEditors: AaronWu 2463371514@qq.com |
|||
* @LastEditTime: 2025-04-01 11:34:26 |
|||
* @FilePath: /KnowledgeBaseSupportManage/src/api/user/index.ts |
|||
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
|||
*/ |
|||
import type { BaseResponse } from '@/utils/request'; |
|||
import { request } from '@/utils/request'; |
|||
/** |
|||
* @description 查询列表 |
|||
* @param {SearchListParams} data |
|||
* @returns |
|||
*/ |
|||
export function fetchKnowledgeBaseList(data: API.SearchListParams) { |
|||
return request<BaseResponse<API.SearchListResult>>( |
|||
{ |
|||
url: 'question/list', |
|||
method: 'post', |
|||
data, |
|||
}, |
|||
{ |
|||
isGetDataDirectly: false, |
|||
}, |
|||
); |
|||
} |
|||
|
|||
/** |
|||
* @description 查询分页列表 |
|||
* @param {SearchPageListParams} data |
|||
* @returns |
|||
*/ |
|||
export function fetchKnowledgeBasePageList(data: API.SearchPageListParams) { |
|||
return request<BaseResponse<API.SearchPageListResult>>( |
|||
{ |
|||
url: 'question/list', |
|||
method: 'post', |
|||
data, |
|||
}, |
|||
{ |
|||
isGetDataDirectly: false, |
|||
}, |
|||
); |
|||
} |
|||
|
|||
/** |
|||
* @description 新增单条 |
|||
* @param {KnowledgeBaseType} data |
|||
* @returns |
|||
*/ |
|||
export function createKnowledgeBase(data: API.KnowledgeBaseType) { |
|||
return request({ |
|||
url: 'question/create', |
|||
method: 'post', |
|||
data, |
|||
}); |
|||
} |
|||
|
|||
/** |
|||
* @description 修改单条 |
|||
* @param {KnowledgeBaseType} data |
|||
* @returns |
|||
*/ |
|||
export function updateKnowledgeBase(data: API.KnowledgeBaseType) { |
|||
return request({ |
|||
url: 'question/update', |
|||
method: 'post', |
|||
data, |
|||
}); |
|||
} |
|||
|
|||
/** |
|||
* @description 查询单条 |
|||
*/ |
|||
export function findOneById(params: { id: string }) { |
|||
return request({ |
|||
url: `question/getById`, |
|||
method: 'get', |
|||
params, |
|||
}); |
|||
} |
|||
|
|||
/** |
|||
* @description 删除单条 ?id=${data.id} |
|||
*/ |
|||
export function deleteKnowledgeBaseById(params: API.DeleteKnowledgeBaseParams) { |
|||
return request({ |
|||
url: `question/delById`, |
|||
method: 'post', |
|||
params, |
|||
}); |
|||
} |
|||
|
|||
/** |
|||
* @description 删除多条 |
|||
*/ |
|||
export function deleteBatchKnowledgeBaseById(data: API.DeleteBatchKnowledgeBaseParams) { |
|||
return request({ |
|||
url: `question/delete`, |
|||
method: 'delete', |
|||
data, |
|||
}); |
|||
} |
|||
@ -0,0 +1,57 @@ |
|||
declare namespace API { |
|||
/** 问题工单类型 */ |
|||
type KnowledgeBaseType = { |
|||
id?: string; |
|||
agent?: string; // 代理商
|
|||
attribute?: string; // 问题属性
|
|||
billcode?: string; // 问题号
|
|||
contacts?: string; // 联系人
|
|||
contactsEmail?: string; // 联系人邮箱
|
|||
contactsMobile?: string; // 联系人手机号
|
|||
createTime?: string; // 创建时间
|
|||
createUserid?: number; // 创建人ID
|
|||
customer?: string; // 客户
|
|||
description?: string; // 问题描述
|
|||
dr?: number; // 删除标记
|
|||
product?: string; // 产品
|
|||
productId?: string; // 产品ID
|
|||
version?: string; // 版本
|
|||
versionId?: string; // 版本ID
|
|||
serviceNumber?: string; // 服务号
|
|||
state?: number; // 状态
|
|||
title?: string; // 问题标题
|
|||
updateTime?: string; // 更新时间
|
|||
updateUserid?: number; // 更新人ID
|
|||
version?: string; // 版本
|
|||
fileList?: any[]; // 附件列表
|
|||
}; |
|||
|
|||
type CreateKnowledgeBaseParams = { |
|||
id?: string; |
|||
agent?: string; // 代理商
|
|||
attribute?: string; // 问题属性
|
|||
billcode?: string; // 问题号
|
|||
contacts?: string; // 联系人
|
|||
contactsEmail?: string; // 联系人邮箱
|
|||
contactsMobile?: string; // 联系人手机号
|
|||
createTime?: string; // 创建时间
|
|||
createUserid?: number; // 创建人ID
|
|||
customer?: string; // 客户
|
|||
description?: string; // 问题描述
|
|||
dr?: number; // 删除标记
|
|||
product?: string; // 产品
|
|||
serviceNumber?: string; // 服务号
|
|||
state?: number; // 状态
|
|||
title?: string; // 问题标题
|
|||
updateTime?: string; // 更新时间
|
|||
updateUserid?: number; // 更新人ID
|
|||
version?: string; // 版本
|
|||
fileList?: any[]; // 附件列表
|
|||
}; |
|||
|
|||
type DeleteKnowledgeBaseParams = { |
|||
id: string; |
|||
}; |
|||
|
|||
type DeleteBatchKnowledgeBaseParams = string[]; |
|||
} |
|||
@ -0,0 +1,106 @@ |
|||
import type { BaseResponse } from '@/utils/request'; |
|||
import { request } from '@/utils/request'; |
|||
|
|||
/** |
|||
* @description 查询类别列表 |
|||
* @param {SearchPageListParams} data |
|||
* @returns |
|||
*/ |
|||
export function fetchProdList(data) { |
|||
return request<BaseResponse<API.SearchPageListResult>>({ |
|||
url: `/product/list`, |
|||
method: 'post', |
|||
data, |
|||
}); |
|||
} |
|||
|
|||
/** |
|||
* @description 新增单条 |
|||
* @param {ProdType} data |
|||
* @returns |
|||
*/ |
|||
export function createProd(data: API.ProdType) { |
|||
return request({ |
|||
url: `/product/create`, |
|||
method: 'post', |
|||
data, |
|||
}); |
|||
} |
|||
|
|||
/** |
|||
* @description 修改单条 |
|||
* @param {ProdType} data |
|||
* @returns |
|||
*/ |
|||
export function updateProd(data: API.ProdType) { |
|||
return request({ |
|||
url: `/product/update`, |
|||
method: 'post', |
|||
data, |
|||
}); |
|||
} |
|||
|
|||
/** |
|||
* @description 删除 |
|||
*/ |
|||
export function deleteProd(data: API.DeleteProdParams) { |
|||
return request({ |
|||
url: `/product/delete?id=${data.id}`, |
|||
method: 'delete', |
|||
}); |
|||
} |
|||
|
|||
/** |
|||
* @description 根据字典类型查询字典值分页列表 |
|||
* @param {SearchPageListParams} params |
|||
* @returns |
|||
*/ |
|||
export function fetchVersionPageList(params: API.SearchPageListParams) { |
|||
return request<BaseResponse<API.SearchPageListResult>>( |
|||
{ |
|||
url: `/productVersion/list`, |
|||
method: 'get', |
|||
params, |
|||
}, |
|||
{ |
|||
isGetDataDirectly: false, |
|||
}, |
|||
); |
|||
} |
|||
|
|||
/** |
|||
* @description 新增单条 |
|||
* @param {VersionType} data |
|||
* @returns |
|||
*/ |
|||
export function createVersion(data: API.VersionType) { |
|||
return request({ |
|||
url: `/productVersion/create`, |
|||
method: 'post', |
|||
data, |
|||
}); |
|||
} |
|||
|
|||
/** |
|||
* @description 修改单条 |
|||
* @param {VersionType} data |
|||
* @returns |
|||
*/ |
|||
export function updateVersion(data: API.VersionType) { |
|||
return request({ |
|||
url: `/productVersion/update`, |
|||
method: 'post', |
|||
data, |
|||
}); |
|||
} |
|||
|
|||
/** |
|||
* @description 删除多条 |
|||
*/ |
|||
export function deleteBatchVersionById(data: API.DeleteBatchVersionParams) { |
|||
return request({ |
|||
url: `/productVersion/delete`, |
|||
method: 'delete', |
|||
data, |
|||
}); |
|||
} |
|||
@ -0,0 +1,23 @@ |
|||
declare namespace API { |
|||
type ProdType = { |
|||
id?: string; |
|||
name: string; |
|||
}; |
|||
|
|||
type DeleteProdParams = { |
|||
id: string; |
|||
}; |
|||
|
|||
type VersionType = { |
|||
id?: string; |
|||
productId: string; |
|||
name: string; |
|||
remark?: string; |
|||
}; |
|||
|
|||
type DeleteVersionParams = { |
|||
id: string; |
|||
}; |
|||
|
|||
type DeleteBatchVersionParams = string[]; |
|||
} |
|||
|
After Width: | Height: | Size: 2.5 KiB |
|
After Width: | Height: | Size: 646 B |
|
After Width: | Height: | Size: 897 B |
|
After Width: | Height: | Size: 721 B |
|
After Width: | Height: | Size: 4.5 KiB |
|
After Width: | Height: | Size: 476 B |
@ -0,0 +1,3 @@ |
|||
export enum DictEnum { |
|||
QUESTION_TYPE = '问题属性', |
|||
} |
|||
@ -0,0 +1,20 @@ |
|||
import { fetchDictValueListByType } from '@/api/dict'; |
|||
|
|||
export const getDictionaryByTypeName = async (name: string) => { |
|||
const res = await fetchDictValueListByType({ typeName: name }); |
|||
if (res && Array.isArray(res) && res.length) { |
|||
return res |
|||
.filter((e) => e.enable === 1) |
|||
.map((e) => { |
|||
return { |
|||
label: e.dictValue, |
|||
value: e.dictValue, |
|||
}; |
|||
}); |
|||
} |
|||
}; |
|||
|
|||
export const getLabelByDictId = ( |
|||
options: Array<{ label: string; value: string }>, |
|||
id: string, |
|||
) => {}; |
|||
@ -0,0 +1,150 @@ |
|||
<!-- |
|||
功能：功能描述 |
|||
作者：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> </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.message" |
|||
/> |
|||
</a-steps> |
|||
</a-tab-pane> |
|||
</a-tabs> |
|||
</a-spin> |
|||
</div> |
|||
</template> |
|||
|
|||
<script lang="ts" setup> |
|||
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 loading = ref(false); |
|||
|
|||
const historyList = ref< |
|||
Array<{ |
|||
status: number; |
|||
message: string; |
|||
title?: string; |
|||
}> |
|||
>([ |
|||
{ |
|||
status: 0, |
|||
message: '初始化', |
|||
}, |
|||
{ |
|||
status: 1, |
|||
message: '退回', |
|||
}, |
|||
{ |
|||
status: 2, |
|||
message: '开发', |
|||
}, |
|||
{ |
|||
status: 3, |
|||
message: '测试', |
|||
}, |
|||
{ |
|||
status: 4, |
|||
message: '结束', |
|||
}, |
|||
]); |
|||
|
|||
historyList.value = historyList.value.map((item) => { |
|||
return { |
|||
...item, |
|||
title: stateTypeList.find((e) => e.value === item.status)?.label, |
|||
}; |
|||
}); |
|||
|
|||
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, |
|||
}; |
|||
}); |
|||
} |
|||
|
|||
current.value = res?.state; |
|||
|
|||
formRef?.setFieldsValue(res); |
|||
formRef?.clearValidate(); |
|||
}); |
|||
</script> |
|||
<style lang="less" scoped></style> |
|||
@ -0,0 +1,325 @@ |
|||
<template> |
|||
<div class="bg-white m-4 mr-2 overflow-hidden h-full"> |
|||
<BasicTree |
|||
ref="treeRef" |
|||
:actionList="actionList" |
|||
:beforeRightClick="getRightMenuList" |
|||
:checkable="false" |
|||
:clickRowToExpand="false" |
|||
:treeData="treeData" |
|||
checkStrictly |
|||
:defaultExpandAll="true" |
|||
search |
|||
toolbar |
|||
:highlight="true" |
|||
@select="handleSelect" |
|||
:toolbarStrictly="false" |
|||
> |
|||
<!-- <template #titleBefore="item"> </template> --> |
|||
</BasicTree> |
|||
<div v-if="query" class="m-4 flex justify-center"> |
|||
<a-button class="w-[80%]" type="primary" @click="handleReset()">重置</a-button> |
|||
<!-- <Checkbox v-model:checked="recursion" @change="handleQuery()">本级及子级</Checkbox> --> |
|||
</div> |
|||
<div v-else class="m-4 flex justify-center"> |
|||
<a-button type="primary" class="w-[80%]" @click="openTypeModal({})"> |
|||
{{ '新增产品' }} |
|||
</a-button> |
|||
<!-- <a-button |
|||
v-permission="{ action: RoleEnum.DICT_DELETE, effect: 'disabled' }" |
|||
class="mr-2" |
|||
@click="handleBatchDelete()" |
|||
> |
|||
{{ '删除' }} |
|||
</a-button> --> |
|||
</div> |
|||
<!-- <OrgRole @register="registerModal" @success="handleSuccess" /> --> |
|||
</div> |
|||
</template> |
|||
<script lang="tsx"> |
|||
import { defineComponent, h, onMounted, ref, unref } from 'vue'; |
|||
import { Checkbox, message, Tag } from 'ant-design-vue'; // antd组件 |
|||
import { useI18n } from '@/hooks/useI18n'; |
|||
import { |
|||
BasicTree, |
|||
ContextMenuItem, |
|||
TreeActionItem, |
|||
TreeActionType, |
|||
TreeItem, |
|||
} from '@/components/core/Tree'; |
|||
import { eachTree, findChildrenByParentId, findNodeByKey } from '@/utils/helper/treeHelper'; |
|||
import { RoleEnum } from '@/enums/roleEnum'; |
|||
import { OrgTypeEnum } from '@/enums/biz/base'; |
|||
import { useFormModal } from '@/hooks/useModal/index'; |
|||
|
|||
import { createProd, deleteProd, fetchProdList, updateProd } from '@/api/prodVersion'; |
|||
// import { useModal } from '@/components/Modal'; |
|||
// import OrgRole from './orgRole/index.vue'; |
|||
import { useMessage } from '@/hooks/useMessage'; |
|||
import { mockTree } from './mockData'; |
|||
import { Nullable } from '@/utils/types'; |
|||
import { prodFormSchema } from './formSchemas'; |
|||
import { TableListItem } from './columns'; |
|||
import { omit } from 'lodash-es'; |
|||
import { isArray } from '@/utils/is'; |
|||
|
|||
export default defineComponent({ |
|||
name: 'BaseProdValueManagement', |
|||
components: { |
|||
BasicTree, |
|||
// OrgRole, |
|||
Checkbox, |
|||
Tag, |
|||
}, |
|||
props: { |
|||
query: { |
|||
type: Boolean, |
|||
default: false, |
|||
}, |
|||
}, |
|||
emits: ['select', 'add', 'edit', 'change', 'reset'], |
|||
setup(props, { emit }) { |
|||
const { t } = useI18n(); |
|||
const { createMessage, createConfirm } = useMessage(); |
|||
|
|||
const treeRef = ref<Nullable<TreeActionType>>(null); |
|||
const treeData = ref<TreeItem[]>([]); |
|||
const recursion = ref<boolean>(false); |
|||
// 绑定角色 |
|||
// const [registerModal, { openModal }] = useModal(); |
|||
|
|||
const [showModal] = useFormModal(); |
|||
|
|||
/** |
|||
* @description 打开弹窗 |
|||
*/ |
|||
const openTypeModal = async (record: Partial<TableListItem> = {}, isReadOnly = false) => { |
|||
const [formRef] = await showModal<any>({ |
|||
modalProps: { |
|||
title: `${isReadOnly ? '查看' : record.id ? '编辑' : '新增'}产品`, |
|||
width: 500, |
|||
onFinish: async (values) => { |
|||
values.id = record.id; |
|||
await (record.id ? updateProd : createProd)(values); |
|||
message.success(`${record.id ? '编辑' : '新增'}成功`); |
|||
fetch(); |
|||
}, |
|||
}, |
|||
formProps: { |
|||
labelWidth: 100, |
|||
schemas: prodFormSchema, |
|||
autoSubmitOnEnter: true, |
|||
}, |
|||
}); |
|||
formRef?.setFieldsValue(record); |
|||
}; |
|||
|
|||
function getTree() { |
|||
const tree = unref(treeRef); |
|||
if (!tree) { |
|||
throw new Error('树结构加载失败,请刷新页面'); |
|||
} |
|||
return tree; |
|||
} |
|||
|
|||
onMounted(() => { |
|||
fetch(); |
|||
}); |
|||
|
|||
// 加载数据 |
|||
async function fetch() { |
|||
const types = (await fetchProdList({})) as unknown as TreeItem[]; |
|||
// const types = mockTree; |
|||
console.log('types: ', types); |
|||
treeData.value = types.map((e) => { |
|||
return { |
|||
...e, |
|||
name: e.name, |
|||
editable: true, |
|||
}; |
|||
}) as unknown as TreeItem[]; |
|||
eachTree(treeData.value, (item) => { |
|||
item.key = item.id; |
|||
item.title = item.name; |
|||
item.slots = { titleBefore: 'titleBefore' }; |
|||
return item; |
|||
}); |
|||
console.log('treeData.value: ', treeData.value); |
|||
console.log('[treeData.value[0].id]: ', [treeData.value[0].id]); |
|||
|
|||
if (isArray(treeData.value) && treeData.value.length > 0) { |
|||
getTree().setSelectedKeys([treeData.value[0].id]); |
|||
handleSelect([treeData.value[0].id]); |
|||
} |
|||
// setTimeout(() => { |
|||
// getTree().filterByLevel(2); |
|||
// }, 0); |
|||
} |
|||
|
|||
// 选择节点 |
|||
function handleSelect(keys: string[]) { |
|||
console.log('keys: ', keys); |
|||
if (keys[0]) { |
|||
const node = findNodeByKey(keys[0], treeData.value); |
|||
const parent = findNodeByKey(node?.parentId, treeData.value); |
|||
let childrenIds: string[] = []; |
|||
if (recursion.value) { |
|||
childrenIds = findChildrenByParentId(keys[0], treeData.value); |
|||
} else { |
|||
childrenIds = [node.id]; |
|||
} |
|||
emit('select', parent, node, childrenIds); |
|||
} else { |
|||
emit('select', {}, {}); |
|||
} |
|||
} |
|||
|
|||
let actionList: TreeActionItem[] = []; |
|||
let getRightMenuList = (_: any): ContextMenuItem[] => { |
|||
return []; |
|||
}; |
|||
if (!props.query) { |
|||
// 悬停图标 |
|||
actionList = [ |
|||
{ |
|||
render: (node) => { |
|||
if (node.editable) { |
|||
return h( |
|||
'a', |
|||
{ |
|||
class: 'ml-2', |
|||
onClick: (e: Event) => { |
|||
e?.stopPropagation(); |
|||
e?.preventDefault(); |
|||
const current = findNodeByKey(node?.id, treeData.value); |
|||
// const parent = findNodeByKey(node?.parentId, treeData.value); |
|||
// emit('edit', parent, current); |
|||
openTypeModal(current); |
|||
}, |
|||
}, |
|||
'编辑', |
|||
); |
|||
} |
|||
}, |
|||
}, |
|||
|
|||
{ |
|||
render: (node) => { |
|||
if (node.editable) { |
|||
return h( |
|||
'a', |
|||
{ |
|||
class: 'ml-2', |
|||
onClick: (e: Event) => { |
|||
e?.stopPropagation(); |
|||
e?.preventDefault(); |
|||
batchDelete(node.id); |
|||
}, |
|||
}, |
|||
'删除', |
|||
); |
|||
} |
|||
}, |
|||
}, |
|||
]; |
|||
|
|||
// 右键菜单 |
|||
// getRightMenuList = (node: any): ContextMenuItem[] => { |
|||
// return [ |
|||
// { |
|||
// label: '编辑', |
|||
// auth: RoleEnum.DICT_EDIT, |
|||
// handler: () => { |
|||
// const current = findNodeByKey(unref(node)?.id, treeData.value); |
|||
// const parent = findNodeByKey(unref(node)?.parentId, treeData.value); |
|||
// emit('edit', parent, current); |
|||
// }, |
|||
// }, |
|||
// { |
|||
// label: '删除', |
|||
// auth: RoleEnum.DICT_DELETE, |
|||
// handler: () => { |
|||
// batchDelete([unref(node).id]); |
|||
// }, |
|||
// }, |
|||
// ]; |
|||
// }; |
|||
} |
|||
|
|||
// 执行批量删除 |
|||
async function batchDelete(id: string) { |
|||
createConfirm({ |
|||
iconType: 'warning', |
|||
content: '选中节点及其子结点将被永久删除, 是否确定删除？', |
|||
onOk: async () => { |
|||
try { |
|||
await deleteProd({ id }); |
|||
createMessage.success(t('common.tips.deleteSuccess')); |
|||
fetch(); |
|||
} catch (e) {} |
|||
}, |
|||
}); |
|||
} |
|||
|
|||
// 点击树外面的 新增 |
|||
function handleAdd() { |
|||
emit('add', findNodeByKey('0', treeData.value)); |
|||
} |
|||
|
|||
// 点击树外面的 批量删除 |
|||
// function handleBatchDelete() { |
|||
// const { checked } = getTree().getCheckedKeys() as { |
|||
// checked: string[]; |
|||
// halfChecked: string[]; |
|||
// }; |
|||
// if (!checked || checked.length <= 0) { |
|||
// createMessage.warning(t('common.tips.pleaseSelectTheData')); |
|||
// return; |
|||
// } |
|||
// batchDelete(checked); |
|||
// } |
|||
|
|||
// 切换显示方式 |
|||
function changeDisplay() { |
|||
emit('change', '2'); |
|||
} |
|||
|
|||
// 重置 |
|||
function handleReset() { |
|||
getTree().setSelectedKeys([]); |
|||
emit('reset'); |
|||
} |
|||
|
|||
// 选择 本级及子级 |
|||
function handleQuery() { |
|||
handleSelect(getTree().getSelectedKeys() as string[]); |
|||
} |
|||
|
|||
// 新增或编辑成功回调 |
|||
function handleSuccess() { |
|||
fetch(); |
|||
} |
|||
|
|||
return { |
|||
t, |
|||
treeRef, |
|||
treeData, |
|||
fetch, |
|||
handleAdd, |
|||
// handleBatchDelete, |
|||
getRightMenuList, |
|||
actionList, |
|||
handleSelect, |
|||
changeDisplay, |
|||
handleReset, |
|||
handleQuery, |
|||
RoleEnum, |
|||
// registerModal, |
|||
handleSuccess, |
|||
recursion, |
|||
OrgTypeEnum, |
|||
openTypeModal, |
|||
}; |
|||
}, |
|||
}); |
|||
</script> |
|||
@ -0,0 +1,30 @@ |
|||
/* |
|||
* @Author: AaronWu 2463371514@qq.com |
|||
* @Date: 2025-04-01 13:43:34 |
|||
* @LastEditors: AaronWu 2463371514@qq.com |
|||
* @LastEditTime: 2025-04-01 13:52:02 |
|||
* @FilePath: /IssueSupportManage/src/views/system/dictionary/columns.tsx |
|||
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
|||
*/ |
|||
import type { TableColumn } from '@/components/core/dynamic-table'; |
|||
|
|||
export type TableListItem = API.VersionType; |
|||
export type TableColumnItem = TableColumn<TableListItem>; |
|||
|
|||
// 数据项类型
|
|||
// export type ListItemType = typeof tableData[number];
|
|||
// 使用TableColumn<ListItemType> 将会限制dataIndex的类型，但换来的是dataIndex有类型提示
|
|||
export const baseColumns: TableColumnItem[] = [ |
|||
{ |
|||
title: '版本名称', |
|||
align: 'center', |
|||
dataIndex: 'name', |
|||
width: 150, |
|||
ellipsis: true, |
|||
resizable: true, |
|||
formItemProps: { |
|||
defaultValue: '', |
|||
required: false, |
|||
}, |
|||
}, |
|||
]; |
|||
@ -0,0 +1,48 @@ |
|||
import type { FormSchema } from '@/components/core/schema-form/'; |
|||
|
|||
// 列表编辑页字段
|
|||
export const editFormSchema: FormSchema[] = [ |
|||
{ |
|||
field: 'id', |
|||
label: 'ID', |
|||
component: 'Input', |
|||
vShow: false, |
|||
}, |
|||
{ |
|||
label: '版本名称', |
|||
field: 'name', |
|||
component: 'Input', |
|||
colProps: { |
|||
span: 24, |
|||
}, |
|||
rules: [{ required: true }], |
|||
}, |
|||
{ |
|||
label:'备注', |
|||
field: 'remark', |
|||
component: 'InputTextArea', |
|||
colProps: { |
|||
span: 24, |
|||
}, |
|||
rules: [{ required: false }], |
|||
} |
|||
]; |
|||
|
|||
// 新增产品表单
|
|||
export const prodFormSchema: FormSchema[] = [ |
|||
{ |
|||
field: 'id', |
|||
label: 'ID', |
|||
component: 'Input', |
|||
vShow: false, |
|||
}, |
|||
{ |
|||
label: '名称', |
|||
field: 'name', |
|||
component: 'Input', |
|||
colProps: { |
|||
span: 24, |
|||
}, |
|||
rules: [{ required: true }], |
|||
}, |
|||
]; |
|||
@ -0,0 +1,241 @@ |
|||
<!-- |
|||
* @Author: AaronWu 2463371514@qq.com |
|||
* @Date: 2025-04-01 13:17:38 |
|||
* @LastEditors: AaronWu 2463371514@qq.com |
|||
* @LastEditTime: 2025-04-01 14:43:11 |
|||
* @FilePath: /IssueSupportManage/src/views/system/dictionary/index.vue |
|||
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE |
|||
--> |
|||
<template> |
|||
<SplitPanel> |
|||
<template #left-content> |
|||
<BaseTypeTree ref="treeRef" class="" @reset="handleReset" @select="handleTypeSelect" /> |
|||
</template> |
|||
<template #right-content> |
|||
<DynamicTable |
|||
search-type="drawer" |
|||
size="small" |
|||
showIndex |
|||
headerTitle="版本列表" |
|||
titleTooltip="" |
|||
:data-request="loadData" |
|||
:columns="columns" |
|||
row-key="id" |
|||
@resize-column="handleResizeColumn" |
|||
:row-selection="rowSelection" |
|||
> |
|||
<template v-if="isCheckRows" #[`title`]> |
|||
<Alert class="w-full" type="info" show-icon> |
|||
<template #message> |
|||
已选 {{ rowSelection.selectedRowKeys.length }} 项 |
|||
<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" |
|||
v-if="isCheckRows" |
|||
@click="delRowConfirm(rowSelection.selectedRowKeys)" |
|||
> |
|||
<DeleteOutlined /> 删除 |
|||
</a-button> |
|||
</template> |
|||
</DynamicTable> |
|||
</template> |
|||
</SplitPanel> |
|||
</template> |
|||
|
|||
<script lang="tsx" setup> |
|||
import { computed, h, ref } from 'vue'; |
|||
import { SplitPanel } from '@/components/basic/split-panel'; |
|||
import BaseTypeTree from './Tree.vue'; |
|||
import { OnChangeCallbackParams, useTable } from '@/components/core/dynamic-table'; |
|||
import { baseColumns } from './columns'; |
|||
import { message, Modal, Alert } from 'ant-design-vue'; |
|||
import { ExclamationCircleOutlined, DeleteOutlined } from '@ant-design/icons-vue'; |
|||
import { useFormModal } from '@/hooks/useModal'; |
|||
import { editFormSchema } from './formSchemas'; |
|||
import { |
|||
createVersion, |
|||
deleteBatchVersionById, |
|||
fetchVersionPageList, |
|||
updateVersion, |
|||
} from '@/api/prodVersion'; |
|||
const columns: any = [ |
|||
...baseColumns, |
|||
{ |
|||
title: '操作', |
|||
width: 50, |
|||
dataIndex: 'ACTION', |
|||
hideInSearch: true, |
|||
align: 'center', |
|||
fixed: 'right', |
|||
actions: ({ record }) => [ |
|||
{ |
|||
color: '#3b82f6', |
|||
size: '15', |
|||
label: '编辑', |
|||
onClick: () => handleEdit(record), |
|||
}, |
|||
{ |
|||
color: '#ec6f6f', |
|||
label: '删除', |
|||
onClick: () => handleDelete(record.id), |
|||
}, |
|||
], |
|||
}, |
|||
]; |
|||
const treeRef = ref<InstanceType<typeof BaseTypeTree>>(); |
|||
const [showModal] = useFormModal(); |
|||
|
|||
const currentType = ref<API.DictType>({ |
|||
id: '', |
|||
name: '', |
|||
}); |
|||
|
|||
const [DynamicTable, dynamicTableInstance] = useTable(); |
|||
|
|||
function handleTypeSelect(_parent = {}, record: API.DictType, childrenIds = []) { |
|||
console.log('record: ', record); |
|||
currentType.value = record; |
|||
dynamicTableInstance?.reload(); |
|||
} |
|||
|
|||
function handleReset() { |
|||
currentType.value = { |
|||
id: '', |
|||
name: '', |
|||
}; |
|||
dynamicTableInstance?.reload(); |
|||
} |
|||
|
|||
/** |
|||
* @description 表格删除行 |
|||
*/ |
|||
const delRowConfirm = async (ids: string[]) => { |
|||
Modal.confirm({ |
|||
title: '确定要删除所选的版本吗?', |
|||
icon: <ExclamationCircleOutlined />, |
|||
centered: true, |
|||
onOk: async () => { |
|||
await deleteBatchVersionById(ids).finally(dynamicTableInstance?.reload); |
|||
}, |
|||
}); |
|||
}; |
|||
|
|||
const handleAdd = () => { |
|||
// openDrawer(true, { type: ActionEnum.ADD, record: {} }); |
|||
|
|||
// modal方式 |
|||
openModal({}); |
|||
}; |
|||
|
|||
const handleEdit = (record: API.VersionType) => { |
|||
if (record.enable === 1) { |
|||
message.warning('启用状态不可编辑'); |
|||
return; |
|||
} |
|||
|
|||
console.log('record: ', record); |
|||
|
|||
//modal 方式打开 |
|||
openModal(record); |
|||
}; |
|||
|
|||
const handleDelete = (id: string) => { |
|||
delRowConfirm([id]); |
|||
}; |
|||
/** |
|||
* @description 打开弹窗 |
|||
*/ |
|||
const openModal = async (record: Partial<API.VersionType> = {}, isReadOnly = false) => { |
|||
if (!currentType.value.id) { |
|||
message.warning('请先选择左侧产品'); |
|||
return; |
|||
} |
|||
const [formRef] = await showModal<any>({ |
|||
modalProps: { |
|||
title: `${isReadOnly ? '查看' : record.id ? '编辑' : '新增'}版本`, |
|||
width: 700, |
|||
onFinish: async (values) => { |
|||
console.log('新增/编辑版本', values); |
|||
values.id = record.id; |
|||
values.productId = currentType.value.id; |
|||
await (record.id ? updateVersion : createVersion)(values); |
|||
message.success(`${record.id ? '编辑' : '新增'}成功`); |
|||
dynamicTableInstance?.reload(); |
|||
}, |
|||
footer: isReadOnly ? null : undefined, |
|||
}, |
|||
formProps: { |
|||
labelWidth: 100, |
|||
schemas: editFormSchema, |
|||
autoSubmitOnEnter: true, |
|||
disabled: isReadOnly, |
|||
}, |
|||
}); |
|||
|
|||
formRef?.setFieldsValue(record); |
|||
// if (record?.id) { |
|||
// const { roles } = await getTenantInfo({ employeeId: record.id }); |
|||
// formRef?.setFieldsValue({ roles }); |
|||
// } |
|||
}; |
|||
|
|||
const rowSelection = ref<any>({ |
|||
selectedRowKeys: [] as string[], |
|||
onChange: (selectedRowKeys: string[], selectedRows: API.VersionType[]) => { |
|||
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); |
|||
|
|||
if (!currentType.value.id) { |
|||
return { |
|||
list: [], |
|||
pagination: { |
|||
total: 0, |
|||
size: params.limit, |
|||
...params, |
|||
}, |
|||
}; |
|||
} |
|||
|
|||
const res = await fetchVersionPageList({ |
|||
...params, |
|||
productId: currentType.value.id, |
|||
current: params.page, |
|||
size: params.limit, |
|||
}); |
|||
console.log('res: ', res); |
|||
rowSelection.value.selectedRowKeys = []; |
|||
|
|||
return { |
|||
list: res.data, |
|||
pagination: { |
|||
total: Number(res.data.total), |
|||
...params, |
|||
}, |
|||
}; |
|||
}; |
|||
const handleResizeColumn = (w, col) => { |
|||
// console.log('w', w, col); |
|||
col.width = w; |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="less" scoped></style> |
|||
@ -0,0 +1,14 @@ |
|||
/* |
|||
* @Author: AaronWu 2463371514@qq.com |
|||
* @Date: 2025-04-01 13:24:31 |
|||
* @LastEditors: AaronWu 2463371514@qq.com |
|||
* @LastEditTime: 2025-04-01 13:25:12 |
|||
* @FilePath: /IssueSupportManage/src/views/system/dictionary/mockData.ts |
|||
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
|||
*/ |
|||
export const mockTree: any[] = [ |
|||
{ |
|||
id: 1, |
|||
name: '字典类别', |
|||
}, |
|||
]; |
|||
Loading…
Reference in new issue