557 lines
16 KiB
TypeScript
557 lines
16 KiB
TypeScript
import dayjs from "dayjs";
|
||
import editForm from "../components/form.vue";
|
||
import { message } from "@/utils/message";
|
||
import { type Ref, ref, reactive, onMounted, h } from "vue";
|
||
import { addDialog, closeDialog } from "@/components/ReDialog";
|
||
import type { PaginationProps } from "@pureadmin/table";
|
||
import type { CodeFeedbackInfo } from "types/code";
|
||
import {
|
||
deleteCodeFeedbackAPI,
|
||
deleteCodeFeedbackListAPI,
|
||
getCodeFeedbackListAPI,
|
||
postAddCodeFeedbackAPI,
|
||
putCodeFeedbackAuditAPI,
|
||
putUpdateCodeFeedbackAPI
|
||
} from "@/api/code";
|
||
import { getKeyList, handleTree } from "@pureadmin/utils";
|
||
import type { DepartmentInfo } from "types/system";
|
||
import { getDepartmentListAPI } from "@/api/system";
|
||
import { $t, transformI18n } from "@/plugins/i18n";
|
||
|
||
export const useCode = (tableRef: Ref) => {
|
||
/**
|
||
* 查询表单
|
||
*/
|
||
const form = reactive({
|
||
code: "",
|
||
feedback_code: "",
|
||
feedback_description: "",
|
||
username: "",
|
||
department_id: "",
|
||
nickname: "",
|
||
timeRange: [null, null],
|
||
status: ""
|
||
});
|
||
/**
|
||
* 表单Ref
|
||
*/
|
||
const formRef = ref(null);
|
||
/**
|
||
* 数据列表
|
||
*/
|
||
const dataList = ref<CodeFeedbackInfo[]>([]);
|
||
/**
|
||
* 加载状态
|
||
*/
|
||
const loading = ref(true);
|
||
/**
|
||
* 已选数量
|
||
*/
|
||
const selectedNum = ref<number>(0);
|
||
/**
|
||
* 分页参数
|
||
*/
|
||
const pagination = reactive<PaginationProps>({
|
||
total: 0,
|
||
pageSize: 10,
|
||
currentPage: 1,
|
||
background: true,
|
||
pageSizes: [10, 20, 30, 40, 50]
|
||
});
|
||
|
||
const getStatusTag = (status: number) => {
|
||
switch (status) {
|
||
case 1:
|
||
return "success";
|
||
case 2:
|
||
return "danger";
|
||
case 3:
|
||
return "warning";
|
||
default:
|
||
return "info";
|
||
}
|
||
};
|
||
|
||
const getStatusTagText = (status: number) => {
|
||
switch (status) {
|
||
case 1:
|
||
return transformI18n($t("tag.reviewSuccess"));
|
||
case 2:
|
||
return transformI18n($t("tag.reviewFail"));
|
||
case 3:
|
||
return transformI18n($t("tag.underReview"));
|
||
default:
|
||
return transformI18n($t("tag.unkonown"));
|
||
}
|
||
};
|
||
/**
|
||
* 表格列设置
|
||
*/
|
||
const columns: TableColumnList = [
|
||
{
|
||
label: transformI18n($t("tag.checkColumn")), // 如果需要表格多选，此处label必须设置
|
||
type: "selection",
|
||
fixed: "left",
|
||
reserveSelection: true // 数据刷新后保留选项
|
||
},
|
||
{
|
||
label: transformI18n($t("tag.account")),
|
||
prop: "username",
|
||
minWidth: 100
|
||
},
|
||
{
|
||
label: transformI18n($t("tag.nickname")),
|
||
prop: "nickname",
|
||
minWidth: 100
|
||
},
|
||
{
|
||
label: transformI18n($t("tag.department")),
|
||
prop: "department_name",
|
||
minWidth: 100
|
||
},
|
||
{
|
||
label: transformI18n($t("review.tag.htsCode")),
|
||
prop: "code",
|
||
formatter: ({ code }) =>
|
||
code ? code.replace(/(\d{2})/g, "$1.").slice(0, -1) : ""
|
||
},
|
||
{
|
||
label: transformI18n($t("review.tag.description")),
|
||
prop: "description"
|
||
},
|
||
{
|
||
label: transformI18n($t("review.tag.feedbackHtsCode")),
|
||
prop: "feedback_code",
|
||
formatter: ({ feedback_code }) =>
|
||
feedback_code
|
||
? feedback_code.replace(/(\d{2})/g, "$1.").slice(0, -1)
|
||
: ""
|
||
},
|
||
{
|
||
label: transformI18n($t("review.tag.feedbackDescription")),
|
||
prop: "feedback_description"
|
||
},
|
||
{
|
||
label: transformI18n($t("review.tag.status")),
|
||
prop: "status",
|
||
minWidth: 100,
|
||
cellRenderer: ({ row, props }) => (
|
||
<el-tag size={props.size} type={getStatusTag(row.status)}>
|
||
{getStatusTagText(row.status)}
|
||
</el-tag>
|
||
)
|
||
},
|
||
{
|
||
label: transformI18n($t("tag.createTime")),
|
||
prop: "create_time",
|
||
formatter: ({ create_time }) =>
|
||
dayjs(create_time).format("YYYY-MM-DD HH:mm:ss")
|
||
},
|
||
{
|
||
label: transformI18n($t("buttons.Operation")),
|
||
fixed: "right",
|
||
width: 250,
|
||
slot: "operation"
|
||
}
|
||
];
|
||
/**
|
||
* 初次查询
|
||
*/
|
||
const onSearch = async () => {
|
||
loading.value = true;
|
||
const res = await getCodeFeedbackListAPI({
|
||
page: pagination.currentPage,
|
||
pageSize: pagination.pageSize,
|
||
feedback_code: form.feedback_code.replace(/\D/g, ""),
|
||
feedback_description: form.feedback_description,
|
||
code: form.code.replace(/\D/g, ""),
|
||
status: form.status,
|
||
username: form.username,
|
||
department_id: form.department_id,
|
||
nickname: form.nickname,
|
||
startTime: form.timeRange[0] ? form.timeRange[0] : null,
|
||
endTime: form.timeRange[1] ? form.timeRange[1] : null
|
||
});
|
||
if (res.success) {
|
||
dataList.value = res.data.result;
|
||
pagination.total = res.data.total;
|
||
pagination.currentPage = res.data.page;
|
||
pagination.pageSize = res.data.pageSize;
|
||
}
|
||
message(res.msg, {
|
||
type: res.success ? "success" : "error"
|
||
});
|
||
loading.value = false;
|
||
};
|
||
/**
|
||
* 重置表单
|
||
* @param formEl 表单ref
|
||
* @returns
|
||
*/
|
||
const resetForm = (formEl: any) => {
|
||
if (!formEl) return;
|
||
formEl.resetFields();
|
||
onSearch();
|
||
};
|
||
/**
|
||
* 处理删除
|
||
* @param row
|
||
*/
|
||
const handleDelete = async (row: CodeFeedbackInfo) => {
|
||
const res = await deleteCodeFeedbackAPI(row.id);
|
||
if (res.success) {
|
||
onSearch();
|
||
}
|
||
message(res.msg, {
|
||
type: res.success ? "success" : "error"
|
||
});
|
||
};
|
||
/**
|
||
* 处理每页数量变化
|
||
*/
|
||
const handleSizeChange = async (val: number) => {
|
||
const res = await getCodeFeedbackListAPI({
|
||
page: pagination.currentPage,
|
||
pageSize: val,
|
||
feedback_code: form.feedback_code.replace(/\D/g, ""),
|
||
feedback_description: form.feedback_description,
|
||
code: form.code.replace(/\D/g, ""),
|
||
status: form.status,
|
||
username: form.username,
|
||
department_id: form.department_id,
|
||
nickname: form.nickname,
|
||
startTime: form.timeRange[0] ? form.timeRange[0] : null,
|
||
endTime: form.timeRange[1] ? form.timeRange[1] : null
|
||
});
|
||
if (res.success) {
|
||
dataList.value = res.data.result;
|
||
pagination.total = res.data.total;
|
||
pagination.currentPage = res.data.page;
|
||
pagination.pageSize = res.data.pageSize;
|
||
}
|
||
message(res.msg, {
|
||
type: res.success ? "success" : "error"
|
||
});
|
||
};
|
||
|
||
/**
|
||
* 处理页码变化
|
||
* @param val
|
||
*/
|
||
const handleCurrentChange = async (val: number) => {
|
||
const res = await getCodeFeedbackListAPI({
|
||
page: val,
|
||
pageSize: pagination.pageSize,
|
||
feedback_code: form.feedback_code.replace(/\D/g, ""),
|
||
feedback_description: form.feedback_description,
|
||
code: form.code.replace(/\D/g, ""),
|
||
status: form.status,
|
||
username: form.username,
|
||
department_id: form.department_id,
|
||
nickname: form.nickname,
|
||
startTime: form.timeRange[0] ? form.timeRange[0] : null,
|
||
endTime: form.timeRange[1] ? form.timeRange[1] : null
|
||
});
|
||
if (res.code === 200) {
|
||
dataList.value = res.data.result;
|
||
pagination.total = res.data.total;
|
||
pagination.currentPage = res.data.page;
|
||
pagination.pageSize = res.data.pageSize;
|
||
}
|
||
message(res.msg, {
|
||
type: res.success ? "success" : "error"
|
||
});
|
||
};
|
||
/** 当CheckBox选择项发生变化时会触发该事件 */
|
||
const handleSelectionChange = async (val: any) => {
|
||
selectedNum.value = val.length;
|
||
// 重置表格高度
|
||
tableRef.value.setAdaptive();
|
||
};
|
||
|
||
/** 取消选择 */
|
||
const onSelectionCancel = async () => {
|
||
selectedNum.value = 0;
|
||
// 用于多选表格，清空用户的选择
|
||
tableRef.value.getTableRef().clearSelection();
|
||
};
|
||
/**
|
||
* 批量删除
|
||
*/
|
||
const onbatchDel = async () => {
|
||
// 返回当前选中的行
|
||
const curSelected = tableRef.value.getTableRef().getSelectionRows();
|
||
const res = await deleteCodeFeedbackListAPI({
|
||
ids: getKeyList(curSelected, "id")
|
||
});
|
||
if (res.success) {
|
||
message(res.msg, {
|
||
type: "success"
|
||
});
|
||
tableRef.value.getTableRef().clearSelection();
|
||
onSearch();
|
||
} else {
|
||
message(res.msg, { type: "error", duration: 5000 });
|
||
}
|
||
};
|
||
const openDialog = async (title = "Add", row?: CodeFeedbackInfo) => {
|
||
addDialog({
|
||
title: transformI18n($t(`buttons.${title}`)),
|
||
props: {
|
||
formInline: {
|
||
way: title,
|
||
feedback_code: row?.feedback_code ?? "",
|
||
feedback_description: row?.feedback_description ?? "",
|
||
code_id: row?.code_id ?? "",
|
||
code: row?.code ?? "",
|
||
description: row?.description ?? "",
|
||
status: row?.status ?? 3,
|
||
user_id: row?.user_id ?? "",
|
||
username: row?.username ?? "",
|
||
nickname: row?.nickname ?? "",
|
||
department_id: row?.department_id ?? "",
|
||
department_name: row?.department_name ?? "",
|
||
id: row?.id ?? "",
|
||
create_time: row?.create_time ?? "",
|
||
update_time: row?.update_time ?? ""
|
||
}
|
||
},
|
||
width: "45%",
|
||
draggable: true,
|
||
fullscreenIcon: true,
|
||
closeOnClickModal: false,
|
||
contentRenderer: () =>
|
||
h(editForm, {
|
||
formInline: {
|
||
way: title,
|
||
feedback_description: row?.feedback_description ?? "",
|
||
feedback_code: row?.feedback_code ?? "",
|
||
code_id: row?.code_id ?? "",
|
||
code: row?.code ?? "",
|
||
description: row?.description ?? "",
|
||
status: row?.status ?? 3,
|
||
user_id: row?.user_id ?? "",
|
||
username: row?.username ?? "",
|
||
nickname: row?.nickname ?? "",
|
||
department_id: row?.department_id ?? "",
|
||
department_name: row?.department_name ?? "",
|
||
id: row?.id ?? "",
|
||
create_time: row?.create_time ?? "",
|
||
update_time: row?.update_time ?? ""
|
||
},
|
||
ref: formRef
|
||
}),
|
||
beforeSure: async (done, {}) => {
|
||
const FormData = formRef.value.newFormInline;
|
||
let form = {
|
||
feedback_description: FormData.feedback_description ?? "",
|
||
feedback_code: FormData.feedback_code.replace(/\D/g, "") ?? "",
|
||
code_id: FormData.code_id ?? ""
|
||
};
|
||
if (title === "Add") {
|
||
const res = await postAddCodeFeedbackAPI(form);
|
||
if (res.success) {
|
||
done();
|
||
await onSearch();
|
||
}
|
||
message(res.msg, { type: res.success ? "success" : "error" });
|
||
} else {
|
||
const res = await putUpdateCodeFeedbackAPI(form, row.id);
|
||
if (res.success) {
|
||
done();
|
||
await onSearch();
|
||
}
|
||
message(res.msg, { type: res.success ? "success" : "error" });
|
||
}
|
||
}
|
||
});
|
||
};
|
||
|
||
/**部门列表 */
|
||
const departments = ref<DepartmentInfo[]>([]);
|
||
/**获取部门列表 */
|
||
const getDepartments = async () => {
|
||
const res = await getDepartmentListAPI({ page: 1, pageSize: 9999 });
|
||
if (res.success) {
|
||
departments.value = formatHigherOptions(
|
||
handleTree(res.data.result, "id", "parent_id")
|
||
);
|
||
} else {
|
||
departments.value = [];
|
||
}
|
||
};
|
||
const formatHigherOptions = (treeList: any) => {
|
||
// 根据返回数据的status字段值判断追加是否禁用disabled字段，返回处理后的树结构，用于上级部门级联选择器的展示（实际开发中也是如此，不可能前端需要的每个字段后端都会返回，这时需要前端自行根据后端返回的某些字段做逻辑处理）
|
||
if (!treeList || !treeList.length) return;
|
||
const newTreeList = [];
|
||
for (let i = 0; i < treeList.length; i++) {
|
||
treeList[i].disabled = treeList[i].status === 0 ? true : false;
|
||
formatHigherOptions(treeList[i].children);
|
||
newTreeList.push(treeList[i]);
|
||
}
|
||
return newTreeList;
|
||
};
|
||
/** 处理审核 */
|
||
const handleAudit = async (row: CodeFeedbackInfo) => {
|
||
addDialog({
|
||
title: "Audit",
|
||
props: {
|
||
formInline: {
|
||
way: "Audit",
|
||
feedback_code: row?.feedback_code ?? "",
|
||
feedback_description: row?.feedback_description ?? "",
|
||
code_id: row?.code_id ?? "",
|
||
code: row?.code ?? "",
|
||
description: row?.description ?? "",
|
||
status: row?.status ?? 3,
|
||
user_id: row?.user_id ?? "",
|
||
username: row?.username ?? "",
|
||
nickname: row?.nickname ?? "",
|
||
department_id: row?.department_id ?? "",
|
||
department_name: row?.department_name ?? "",
|
||
id: row?.id ?? "",
|
||
create_time: row?.create_time ?? "",
|
||
update_time: row?.update_time ?? ""
|
||
}
|
||
},
|
||
width: "45%",
|
||
draggable: true,
|
||
fullscreenIcon: true,
|
||
closeOnClickModal: false,
|
||
|
||
contentRenderer: () =>
|
||
h(editForm, {
|
||
formInline: {
|
||
way: "Audit",
|
||
feedback_code: row?.feedback_code ?? "",
|
||
feedback_description: row?.feedback_description ?? "",
|
||
code_id: row?.code_id ?? "",
|
||
code: row?.code ?? "",
|
||
description: row?.description ?? "",
|
||
status: row?.status ?? 3,
|
||
user_id: row?.user_id ?? "",
|
||
username: row?.username ?? "",
|
||
nickname: row?.nickname ?? "",
|
||
department_id: row?.department_id ?? "",
|
||
department_name: row?.department_name ?? "",
|
||
id: row?.id ?? "",
|
||
create_time: row?.create_time ?? "",
|
||
update_time: row?.update_time ?? ""
|
||
},
|
||
ref: formRef
|
||
}),
|
||
|
||
footerButtons: [
|
||
{
|
||
label: transformI18n($t("buttons.Cancel")),
|
||
type: "info",
|
||
btnClick: ({ dialog }) => {
|
||
closeDialog(dialog.options!, dialog.index!); // ✅ 调用封装的 `closeDialog`
|
||
}
|
||
},
|
||
{
|
||
label: transformI18n($t("buttons.Approve")),
|
||
type: "success",
|
||
popconfirm: {
|
||
title: transformI18n($t("tip.reviewSuccess")),
|
||
confirmButtonText: transformI18n($t("buttons.Confirm")),
|
||
cancelButtonText: transformI18n($t("buttons.Cancel"))
|
||
},
|
||
btnClick: async ({ dialog }) => {
|
||
const res = await putCodeFeedbackAuditAPI({
|
||
status: 1,
|
||
ids: [row.id]
|
||
});
|
||
if (res.success) {
|
||
closeDialog(dialog.options!, dialog.index!); // ✅ 调用封装的 `closeDialog`
|
||
await onSearch();
|
||
}
|
||
message(res.msg, { type: res.success ? "success" : "error" });
|
||
}
|
||
},
|
||
{
|
||
label: transformI18n($t("buttons.Reject")),
|
||
type: "danger",
|
||
popconfirm: {
|
||
title: transformI18n($t("tip.reviewFail")),
|
||
confirmButtonText: transformI18n($t("buttons.Confirm")),
|
||
cancelButtonText: transformI18n($t("buttons.Cancel"))
|
||
},
|
||
btnClick: async ({ dialog }) => {
|
||
const res = await putCodeFeedbackAuditAPI({
|
||
status: 2,
|
||
ids: [row.id]
|
||
});
|
||
if (res.success) {
|
||
closeDialog(dialog.options!, dialog.index!); // ✅ 调用封装的 `closeDialog`
|
||
await onSearch();
|
||
}
|
||
message(res.msg, { type: res.success ? "success" : "error" });
|
||
}
|
||
}
|
||
]
|
||
});
|
||
};
|
||
/**批量通过 */
|
||
const onbatchAgree = async () => {
|
||
// 返回当前选中的行
|
||
const curSelected = tableRef.value.getTableRef().getSelectionRows();
|
||
const res = await putCodeFeedbackAuditAPI({
|
||
status: 1,
|
||
ids: getKeyList(curSelected, "id")
|
||
});
|
||
if (res.success) {
|
||
message(res.msg, {
|
||
type: "success"
|
||
});
|
||
tableRef.value.getTableRef().clearSelection();
|
||
onSearch();
|
||
} else {
|
||
message(res.msg, { type: "error", duration: 5000 });
|
||
}
|
||
};
|
||
/**批量驳回 */
|
||
const onbatchDisagree = async () => {
|
||
// 返回当前选中的行
|
||
const curSelected = tableRef.value.getTableRef().getSelectionRows();
|
||
const res = await putCodeFeedbackAuditAPI({
|
||
status: 2,
|
||
ids: getKeyList(curSelected, "id")
|
||
});
|
||
if (res.success) {
|
||
message(res.msg, {
|
||
type: "success"
|
||
});
|
||
}
|
||
};
|
||
|
||
/**
|
||
* 页面加载执行
|
||
*/
|
||
onMounted(async () => {
|
||
await onSearch();
|
||
await getDepartments();
|
||
});
|
||
return {
|
||
form,
|
||
dataList,
|
||
loading,
|
||
pagination,
|
||
columns,
|
||
selectedNum,
|
||
departments,
|
||
openDialog,
|
||
onSearch,
|
||
resetForm,
|
||
handleDelete,
|
||
handleSizeChange,
|
||
handleCurrentChange,
|
||
handleSelectionChange,
|
||
onSelectionCancel,
|
||
onbatchDel,
|
||
handleAudit,
|
||
onbatchDisagree,
|
||
onbatchAgree
|
||
};
|
||
};
|