|
|
|
@ -9,71 +9,84 @@ |
|
|
|
修改时间： |
|
|
|
--> |
|
|
|
<template> |
|
|
|
<div class="issue-container" ref="issueContainerRef"> |
|
|
|
<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> |
|
|
|
<div class="h-[100%]"> |
|
|
|
<div class="issue-container h-[55%] overflow-auto" ref="issueContainerRef"> |
|
|
|
<DynamicTable |
|
|
|
size="small" |
|
|
|
showIndex |
|
|
|
headerTitle="问题工单列表" |
|
|
|
titleTooltip="" |
|
|
|
:data-request="loadData" |
|
|
|
:columns="columns" |
|
|
|
row-key="id" |
|
|
|
@resize-column="handleResizeColumn" |
|
|
|
:row-class-name="getRowClassName" |
|
|
|
:customRow="customRow" |
|
|
|
: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> |
|
|
|
<Modal |
|
|
|
v-model:visible="visible" |
|
|
|
:width="1000" |
|
|
|
:bodyStyle="{ |
|
|
|
height: '55vh', |
|
|
|
overflow: 'auto', |
|
|
|
}" |
|
|
|
:title="`${curRecord.id ? '编辑' : '新增'}问题工单`" |
|
|
|
@ok="handleOk" |
|
|
|
@cancel="handleCancel" |
|
|
|
:mask-closable="false" |
|
|
|
:destroyOnClose="true" |
|
|
|
:getContainer="() => issueContainerRef" |
|
|
|
> |
|
|
|
<SchemaForm> |
|
|
|
<template #solution="{ formModel, field }"> |
|
|
|
<div class="ql-box"> |
|
|
|
<QuillEditor |
|
|
|
ref="quillEditor" |
|
|
|
theme="snow" |
|
|
|
v-model:content="formModel[field]" |
|
|
|
:options="editorOptions" |
|
|
|
contentType="html" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
</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> |
|
|
|
<Modal |
|
|
|
v-model:visible="visible" |
|
|
|
:width="700" |
|
|
|
:bodyStyle="{ |
|
|
|
height: '70vh', |
|
|
|
overflow: 'auto', |
|
|
|
}" |
|
|
|
:title="`${curRecord.id ? '编辑' : '新增'}问题工单`" |
|
|
|
@ok="handleOk" |
|
|
|
@cancel="handleCancel" |
|
|
|
:mask-closable="false" |
|
|
|
:destroyOnClose="true" |
|
|
|
:getContainer="() => issueContainerRef" |
|
|
|
> |
|
|
|
<SchemaForm> |
|
|
|
<template #solution="{ formModel, field }"> |
|
|
|
<div class="ql-box"> |
|
|
|
<QuillEditor |
|
|
|
ref="quillEditor" |
|
|
|
theme="snow" |
|
|
|
v-model:content="formModel[field]" |
|
|
|
:options="editorOptions" |
|
|
|
contentType="html" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
</SchemaForm> |
|
|
|
</Modal> |
|
|
|
</div> |
|
|
|
<div class="detail-container bg-white flex justify-center items-center min-h-[200px]"> |
|
|
|
<Detail :id="curRowId" v-if="curRowId"></Detail> |
|
|
|
<a-empty v-else> |
|
|
|
<template #description> |
|
|
|
<span> 请选择问题工单查看 </span> |
|
|
|
</template> |
|
|
|
</SchemaForm> |
|
|
|
</Modal> |
|
|
|
</a-empty> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script lang="tsx" setup> |
|
|
|
import { QuillEditor } from '@vueup/vue-quill'; |
|
|
|
import Detail from './detail.vue'; |
|
|
|
import '@vueup/vue-quill/dist/vue-quill.snow.css'; |
|
|
|
import { type TableListItem, baseColumns } from './columns'; |
|
|
|
import { useTable, type OnChangeCallbackParams } from '@/components/core/dynamic-table'; |
|
|
|
@ -88,7 +101,7 @@ |
|
|
|
addToknowledge, |
|
|
|
} from '@/api/issue'; |
|
|
|
import { computed, nextTick, ref, watch, onMounted } from 'vue'; |
|
|
|
import { message, Alert } from 'ant-design-vue'; |
|
|
|
import { message, Alert, Modal } from 'ant-design-vue'; |
|
|
|
import { useRouter } from 'vue-router'; |
|
|
|
import { useFormModal } from '@/hooks/useModal/index'; |
|
|
|
import { getEditFormSchema, getFlowFormSchema } from './formSchemas'; |
|
|
|
@ -107,6 +120,7 @@ |
|
|
|
|
|
|
|
const issueContainerRef = ref<HTMLElement | null>(null); |
|
|
|
const curRecord = ref<Partial<TableListItem>>({}); |
|
|
|
const curRowId = ref<any>(''); |
|
|
|
const visible = ref(false); |
|
|
|
const quillEditor = ref<InstanceType<typeof QuillEditor> | null>(null); |
|
|
|
const editorOptions = ref({ |
|
|
|
@ -121,6 +135,24 @@ |
|
|
|
}, |
|
|
|
}); |
|
|
|
|
|
|
|
// 设置行的类名 |
|
|
|
const getRowClassName = (record) => { |
|
|
|
return curRowId.value === record.id ? 'highlight-row' : ''; |
|
|
|
}; |
|
|
|
|
|
|
|
const customRow = (record: TableListItem) => { |
|
|
|
return { |
|
|
|
style: { |
|
|
|
cursor: 'pointer', |
|
|
|
}, |
|
|
|
onClick: () => { |
|
|
|
// handleView(record); |
|
|
|
curRowId.value = record.id; |
|
|
|
curRecord.value = record; |
|
|
|
}, |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
const [showModal] = useFormModal(); |
|
|
|
|
|
|
|
const [showFlowModal] = useFormModal(); |
|
|
|
@ -141,7 +173,8 @@ |
|
|
|
// watch( |
|
|
|
// () => curRecord.value, |
|
|
|
// (newVal) => { |
|
|
|
// formRef?.setFieldsValue(newVal); |
|
|
|
// console.log('newVal: ', newVal); |
|
|
|
// formRef?.updateSchema(getEditFormSchema(newVal)); |
|
|
|
// }, |
|
|
|
// { |
|
|
|
// immediate: true, |
|
|
|
@ -220,27 +253,33 @@ |
|
|
|
const { state } = record; |
|
|
|
const stateText = stateTypeList.find((item) => item.value === state)?.label; |
|
|
|
return [ |
|
|
|
{ |
|
|
|
icon: 'searchoutlined', |
|
|
|
color: '#3b82f6', |
|
|
|
label: '查看', |
|
|
|
onClick: () => handleView(record), |
|
|
|
}, |
|
|
|
// { |
|
|
|
// icon: 'searchoutlined', |
|
|
|
// color: '#3b82f6', |
|
|
|
// label: '查看', |
|
|
|
// onClick: () => handleView(record), |
|
|
|
// }, |
|
|
|
{ |
|
|
|
icon: 'edit', |
|
|
|
color: '#3b82f6', |
|
|
|
size: '15', |
|
|
|
label: '修改', |
|
|
|
// ifShow: stateText !== '结束', |
|
|
|
onClick: () => handleEdit(record), |
|
|
|
ifShow: stateText !== '关闭', |
|
|
|
onClick: (e) => { |
|
|
|
e.stopPropagation(); |
|
|
|
handleEdit(record); |
|
|
|
}, |
|
|
|
}, |
|
|
|
{ |
|
|
|
icon: 'init', |
|
|
|
size: '15', |
|
|
|
title: '初始化', |
|
|
|
label: '初始化', |
|
|
|
title: '处理', |
|
|
|
label: '处理', |
|
|
|
ifShow: stateText === '退回', |
|
|
|
onClick: () => changeState(record, 0), |
|
|
|
onClick: (e) => { |
|
|
|
e.stopPropagation(); |
|
|
|
changeState(record, 0); |
|
|
|
}, |
|
|
|
}, |
|
|
|
{ |
|
|
|
icon: 'dev', |
|
|
|
@ -248,15 +287,21 @@ |
|
|
|
title: '开发', |
|
|
|
label: '开发', |
|
|
|
ifShow: stateText === '待处理', |
|
|
|
onClick: () => changeState(record, 2), |
|
|
|
onClick: (e) => { |
|
|
|
e.stopPropagation(); |
|
|
|
changeState(record, 2); |
|
|
|
}, |
|
|
|
}, |
|
|
|
{ |
|
|
|
icon: 'back', |
|
|
|
size: '20', |
|
|
|
title: '退回', |
|
|
|
label: '退回', |
|
|
|
ifShow: stateText === '待处理', |
|
|
|
onClick: () => changeState(record, 1), |
|
|
|
ifShow: stateText === '开发中' || stateText === '测试中', |
|
|
|
onClick: (e) => { |
|
|
|
e.stopPropagation(); |
|
|
|
changeState(record, 1); |
|
|
|
}, |
|
|
|
}, |
|
|
|
{ |
|
|
|
icon: 'test', |
|
|
|
@ -264,7 +309,10 @@ |
|
|
|
title: '测试', |
|
|
|
label: '测试', |
|
|
|
ifShow: stateText === '开发中', |
|
|
|
onClick: () => changeState(record, 3), |
|
|
|
onClick: (e) => { |
|
|
|
e.stopPropagation(); |
|
|
|
changeState(record, 3); |
|
|
|
}, |
|
|
|
}, |
|
|
|
{ |
|
|
|
icon: 'end', |
|
|
|
@ -272,7 +320,10 @@ |
|
|
|
title: '结束', |
|
|
|
label: '结束', |
|
|
|
ifShow: stateText === '测试中', |
|
|
|
onClick: () => changeState(record, 4), |
|
|
|
onClick: (e) => { |
|
|
|
e.stopPropagation(); |
|
|
|
changeState(record, 4); |
|
|
|
}, |
|
|
|
}, |
|
|
|
{ |
|
|
|
icon: 'knowledge', |
|
|
|
@ -280,13 +331,31 @@ |
|
|
|
title: '添加到知识库', |
|
|
|
label: '添加到知识库', |
|
|
|
ifShow: stateText === '已解决', |
|
|
|
onClick: () => handleAddToKnowledge(record), |
|
|
|
onClick: (e) => { |
|
|
|
e.stopPropagation(); |
|
|
|
handleAddToKnowledge(record); |
|
|
|
}, |
|
|
|
}, |
|
|
|
{ |
|
|
|
icon: 'close', |
|
|
|
size: '16', |
|
|
|
title: '关闭', |
|
|
|
label: '关闭', |
|
|
|
ifShow: stateText !== '关闭', |
|
|
|
onClick: (e) => { |
|
|
|
e.stopPropagation(); |
|
|
|
changeState(record, 5); |
|
|
|
}, |
|
|
|
}, |
|
|
|
{ |
|
|
|
icon: 'delete', |
|
|
|
color: '#ec6f6f', |
|
|
|
label: '删除', |
|
|
|
onClick: () => handleDelete(record.id), |
|
|
|
ifShow: stateText !== '关闭', |
|
|
|
onClick: (e) => { |
|
|
|
e.stopPropagation(); |
|
|
|
handleDelete(record.id); |
|
|
|
}, |
|
|
|
// popConfirm: { |
|
|
|
// title: '确定要删除吗？', |
|
|
|
// onConfirm: () => handleDelete(record.id), |
|
|
|
@ -382,7 +451,7 @@ |
|
|
|
state: state, |
|
|
|
...values, |
|
|
|
}); |
|
|
|
message.success(`${flowTitle}成功`); |
|
|
|
message.success(`操作成功`); |
|
|
|
dynamicTableInstance?.reload(); |
|
|
|
}, |
|
|
|
}, |
|
|
|
@ -497,24 +566,19 @@ |
|
|
|
}; |
|
|
|
|
|
|
|
const handleDelete = (id: string) => { |
|
|
|
delRowConfirm(id); |
|
|
|
delRowConfirm([id]); |
|
|
|
}; |
|
|
|
|
|
|
|
/** |
|
|
|
* @description 表格删除行 |
|
|
|
*/ |
|
|
|
const delRowConfirm = async (id: string | string[]) => { |
|
|
|
const delRowConfirm = async (id: 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); |
|
|
|
} |
|
|
|
await deleteBatchIssueById(id).finally(dynamicTableInstance?.reload); |
|
|
|
}, |
|
|
|
}); |
|
|
|
}; |
|
|
|
@ -620,6 +684,10 @@ |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang="less"> |
|
|
|
/* 定义高亮行的样式 */ |
|
|
|
.highlight-row { |
|
|
|
background-color: #e6f7ff !important; /* 设置高亮背景色 */ |
|
|
|
} |
|
|
|
.action-divider { |
|
|
|
margin: 0 5px; |
|
|
|
} |
|
|
|
|
AaronWu
1 month ago
