|
@@ -9,23 +9,27 @@
|
|
|
<template #icon><svg-icon name="delete" color="#262626" /></template>
|
|
|
作废
|
|
|
</t-button>
|
|
|
- <t-button variant="outline" @click="handleAdd">
|
|
|
- <template #icon><svg-icon name="view" color="#262626" /></template>
|
|
|
- 显示字段</t-button
|
|
|
- >
|
|
|
- <t-button variant="outline" @click="handleAdd">
|
|
|
+ <select-metadata
|
|
|
+ v-model="params.formWidgetMetadataList"
|
|
|
+ multiple
|
|
|
+ ></select-metadata>
|
|
|
+ <t-button variant="outline" @click="handleRefresh">
|
|
|
<template #icon><svg-icon name="refresh" color="#262626" /></template>
|
|
|
刷新</t-button
|
|
|
>
|
|
|
- <t-button variant="outline" @click="handleAdd">
|
|
|
+ <t-button variant="outline" @click="handleSort">
|
|
|
<template #icon><svg-icon name="sort" color="#262626" /></template>
|
|
|
排序</t-button
|
|
|
>
|
|
|
- <t-button variant="outline" @click="handleAdd">
|
|
|
+ <t-button
|
|
|
+ v-if="appStore.showSubmenu"
|
|
|
+ variant="outline"
|
|
|
+ @click="toggleSubMenuHandle"
|
|
|
+ >
|
|
|
<template #icon><svg-icon name="enlarge" color="#262626" /></template>
|
|
|
放大</t-button
|
|
|
>
|
|
|
- <t-button variant="outline" @click="handleAdd">
|
|
|
+ <t-button v-else variant="outline" @click="toggleSubMenuHandle">
|
|
|
<template #icon><svg-icon name="shrink" color="#262626" /></template>
|
|
|
缩小</t-button
|
|
|
>
|
|
@@ -37,11 +41,6 @@
|
|
|
</SearchForm>
|
|
|
|
|
|
<div class="flex-1 page-wrap">
|
|
|
- <div class="btn-group">
|
|
|
- <t-button theme="success" :disabled="!selectedRowKeys.length"
|
|
|
- >批量作废</t-button
|
|
|
- >
|
|
|
- </div>
|
|
|
<t-table
|
|
|
size="small"
|
|
|
row-key="id"
|
|
@@ -60,36 +59,108 @@
|
|
|
:selected-row-keys="selectedRowKeys"
|
|
|
@select-change="selectChange"
|
|
|
>
|
|
|
+ <template #beginTime="{ col, row }">
|
|
|
+ {{ timestampFilter(row[col.colKey]) }}
|
|
|
+ </template>
|
|
|
+ <template #examStartTime="{ col, row }">
|
|
|
+ {{ timestampFilter(row[col.colKey]) }}
|
|
|
+ </template>
|
|
|
+ <template #examEndTime="{ col, row }">
|
|
|
+ {{ timestampFilter(row[col.colKey]) }}
|
|
|
+ </template>
|
|
|
+ <template #flowCreateTime="{ col, row }">
|
|
|
+ {{ timestampFilter(row[col.colKey]) }}
|
|
|
+ </template>
|
|
|
+ <template #flowUpdateTime="{ col, row }">
|
|
|
+ {{ timestampFilter(row[col.colKey]) }}
|
|
|
+ </template>
|
|
|
<template #operate="{ row }">
|
|
|
<div class="table-operations" @click.stop>
|
|
|
- <t-link theme="primary" hover="color" @click="toCurSopFlow(row)">
|
|
|
+ <t-link
|
|
|
+ theme="primary"
|
|
|
+ hover="color"
|
|
|
+ @click="editSopFlowHandle(row, 'fill')"
|
|
|
+ >
|
|
|
填报
|
|
|
</t-link>
|
|
|
- <t-link theme="primary" hover="color" @click="createSopFlow(row)">
|
|
|
+ <t-link
|
|
|
+ theme="primary"
|
|
|
+ hover="color"
|
|
|
+ @click="editSopFlowHandle(row, 'new')"
|
|
|
+ >
|
|
|
新增SOP
|
|
|
</t-link>
|
|
|
- <t-link theme="primary" hover="color" @click="toCurSopFlow(row)">
|
|
|
+ <t-link
|
|
|
+ theme="primary"
|
|
|
+ hover="color"
|
|
|
+ @click="createViolationHandle(row)"
|
|
|
+ >
|
|
|
新增违规
|
|
|
</t-link>
|
|
|
- <t-link theme="primary" hover="color" @click="toCurSopFlow(row)">
|
|
|
+ <t-link
|
|
|
+ theme="primary"
|
|
|
+ hover="color"
|
|
|
+ @click="createQualityIssueHandle(row)"
|
|
|
+ >
|
|
|
上报质量问题
|
|
|
</t-link>
|
|
|
- <t-link theme="primary" hover="color" @click="planChange(row)">
|
|
|
+ <t-link
|
|
|
+ theme="primary"
|
|
|
+ hover="color"
|
|
|
+ @click="planChangeHandle(row)"
|
|
|
+ >
|
|
|
计划变更报备
|
|
|
</t-link>
|
|
|
</div>
|
|
|
</template>
|
|
|
</t-table>
|
|
|
</div>
|
|
|
+
|
|
|
+ <!-- SopStepDialog -->
|
|
|
+ <sop-step-dialog
|
|
|
+ v-model:visible="showSopStepDialog"
|
|
|
+ :sop="curSopData"
|
|
|
+ :type="curSopType"
|
|
|
+ @confirm="fetchData"
|
|
|
+ ></sop-step-dialog>
|
|
|
+ <!-- QualityIssueDialog -->
|
|
|
+ <quality-issue-dialog
|
|
|
+ v-model:visible="showQualityIssueDialog"
|
|
|
+ :sop="curSopData"
|
|
|
+ type="new"
|
|
|
+ @confirm="fetchData"
|
|
|
+ ></quality-issue-dialog>
|
|
|
+ <!-- PlanChangeDialog -->
|
|
|
+ <PlanChangeDialog
|
|
|
+ v-model:visible="showPlanChangeDialog"
|
|
|
+ :sop="curSopData"
|
|
|
+ type="new"
|
|
|
+ @confirm="fetchData"
|
|
|
+ ></PlanChangeDialog>
|
|
|
+ <!-- AddViolationDialog -->
|
|
|
+ <add-violation-dialog
|
|
|
+ v-model:visible="showAddViolationDialog"
|
|
|
+ :sop="curSopData"
|
|
|
+ type="new"
|
|
|
+ ></add-violation-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="jsx" name="StudentSop">
|
|
|
-import { ref, reactive } from 'vue';
|
|
|
-import { sopBatchCancelApi } from '@/api/sop';
|
|
|
+import { ref, reactive, computed } from 'vue';
|
|
|
import useFetchTable from '@/hooks/useFetchTable';
|
|
|
+import { sopListApi, sopBatchCancelApi } from '@/api/sop';
|
|
|
+import { timestampFilter } from '@/utils/filter';
|
|
|
+import SopStepDialog from '../sop-step/sop-step-dialog.vue';
|
|
|
+import QualityIssueDialog from '../quality-issue/quality-issue-dialog.vue';
|
|
|
+import PlanChangeDialog from '../plan-change/plan-change-dialog.vue';
|
|
|
+import AddViolationDialog from '../../sop-monitor/violation-registration/add-violation-dialog.vue';
|
|
|
+import { useAppStore } from '@/store';
|
|
|
+
|
|
|
+const appStore = useAppStore();
|
|
|
+
|
|
|
const selectedRowKeys = ref([]);
|
|
|
-const selectChange = (value, { selectedRowData }) => {
|
|
|
+const selectChange = (value) => {
|
|
|
selectedRowKeys.value = value;
|
|
|
};
|
|
|
const columns = [
|
|
@@ -99,29 +170,29 @@ const columns = [
|
|
|
width: 50,
|
|
|
fixed: 'left',
|
|
|
},
|
|
|
- { colKey: 'serviceName', title: '服务单元' },
|
|
|
- { colKey: 'sopNo', title: 'SOP流水号' },
|
|
|
- { colKey: 'crmNo', title: '项目单号' },
|
|
|
- { colKey: 'beginTime', title: '派单时间' },
|
|
|
- { colKey: 'customManagerName', title: '客户经理' },
|
|
|
- { colKey: 'customManagerTypeStr', title: '客户类型' },
|
|
|
- { colKey: 'customName', title: '客户名称' },
|
|
|
- { colKey: 'crmName', title: '项目名称' },
|
|
|
- { colKey: 'productName', title: '实施产品' },
|
|
|
- { colKey: 'examStartTime', title: '考试开始时间' },
|
|
|
- { colKey: 'examEndTime', title: '考试结束时间' },
|
|
|
+ { colKey: 'serviceName', title: '服务单元', width: 160 },
|
|
|
+ { colKey: 'sopNo', title: 'SOP流水号', width: 200 },
|
|
|
+ { colKey: 'crmNo', title: '项目单号', width: 200 },
|
|
|
+ { colKey: 'beginTime', title: '派单时间', width: 180 },
|
|
|
+ { colKey: 'customManagerName', title: '客户经理', width: 140 },
|
|
|
+ { colKey: 'customManagerTypeStr', title: '客户类型', width: 120 },
|
|
|
+ { colKey: 'customName', title: '客户名称', width: 140 },
|
|
|
+ { colKey: 'crmName', title: '项目名称', minWidth: 160 },
|
|
|
+ { colKey: 'productName', title: '实施产品', width: 120 },
|
|
|
+ { colKey: 'examStartTime', title: '考试开始时间', width: 180 },
|
|
|
+ { colKey: 'examEndTime', title: '考试结束时间', width: 180 },
|
|
|
//...
|
|
|
- { colKey: 'flowCreateName', title: '提交人' },
|
|
|
- { colKey: 'flowCreateTime', title: '提交时间' },
|
|
|
- { colKey: 'flowUpdateTime', title: '更新时间' },
|
|
|
- { colKey: 'status', title: '流程状态' },
|
|
|
- { colKey: 'taskName', title: '流程节点' },
|
|
|
- { colKey: 'pendApproveName', title: '当前节点负责人' },
|
|
|
+ { colKey: 'flowCreateName', title: '提交人', width: 140 },
|
|
|
+ { colKey: 'flowCreateTime', title: '提交时间', width: 180 },
|
|
|
+ { colKey: 'flowUpdateTime', title: '更新时间', width: 180 },
|
|
|
+ { colKey: 'status', title: '流程状态', width: 120 },
|
|
|
+ { colKey: 'taskName', title: '流程节点', width: 160 },
|
|
|
+ { colKey: 'pendApproveName', title: '当前节点负责人', width: 140 },
|
|
|
{
|
|
|
title: '管理',
|
|
|
colKey: 'operate',
|
|
|
fixed: 'right',
|
|
|
- width: 240,
|
|
|
+ width: 420,
|
|
|
},
|
|
|
];
|
|
|
const fields = ref([
|
|
@@ -149,17 +220,30 @@ const fields = ref([
|
|
|
]);
|
|
|
const params = reactive({
|
|
|
serviceId: '',
|
|
|
+ formWidgetMetadataList: [],
|
|
|
+});
|
|
|
+const transParams = computed(() => {
|
|
|
+ return { ...params, type: 'CLOUD_MARK_SOP_FLOW' };
|
|
|
});
|
|
|
-
|
|
|
const {
|
|
|
loading: tableLoading,
|
|
|
pagination,
|
|
|
tableData,
|
|
|
search,
|
|
|
+ fetchData,
|
|
|
onChange,
|
|
|
-} = useFetchTable(getTableData);
|
|
|
+} = useFetchTable(sopListApi, { params: transParams });
|
|
|
+
|
|
|
+const handleSort = () => {
|
|
|
+ // TODO:
|
|
|
+};
|
|
|
+const handleRefresh = () => {
|
|
|
+ search();
|
|
|
+};
|
|
|
|
|
|
-const handleAdd = () => {};
|
|
|
+const toggleSubMenuHandle = () => {
|
|
|
+ appStore.toggleSubMenu();
|
|
|
+};
|
|
|
|
|
|
const handleBatchCancel = () => {
|
|
|
if (!selectedRowKeys.value.length) {
|
|
@@ -184,15 +268,47 @@ const handleBatchCancel = () => {
|
|
|
});
|
|
|
};
|
|
|
|
|
|
-const createSopFlow = (row) => {
|
|
|
- router.push({ name: 'StuSopStep' });
|
|
|
+const showAddViolationDialog = ref(false);
|
|
|
+const createViolationHandle = (row) => {
|
|
|
+ curSopData.value = row;
|
|
|
+ showAddViolationDialog.value = true;
|
|
|
};
|
|
|
-const toCurSopFlow = (row) => {
|
|
|
- router.push({ name: 'StuSopStep' });
|
|
|
+
|
|
|
+const showSopStepDialog = ref(false);
|
|
|
+const curSopData = ref({});
|
|
|
+const curSopType = ref('');
|
|
|
+const editSopFlowHandle = (row, type = 'fill') => {
|
|
|
+ curSopType.value = type;
|
|
|
+
|
|
|
+ if (type === 'new') {
|
|
|
+ curSopData.value = {
|
|
|
+ ...row,
|
|
|
+ flowDeploymentId:
|
|
|
+ appStore.getFlowDetailByType('OFFICE_SOP_FLOW')?.flowDeploymentId,
|
|
|
+ };
|
|
|
+ } else {
|
|
|
+ curSopData.value = row;
|
|
|
+ }
|
|
|
+ showSopStepDialog.value = true;
|
|
|
};
|
|
|
|
|
|
-const planChange = (row) => {
|
|
|
- curRow.value = row;
|
|
|
+const showPlanChangeDialog = ref(false);
|
|
|
+const planChangeHandle = (row) => {
|
|
|
+ curSopData.value = {
|
|
|
+ ...row,
|
|
|
+ flowDeploymentId: appStore.getFlowDetailByType('PROJECT_EXCHANGE_FLOW')
|
|
|
+ ?.flowDeploymentId,
|
|
|
+ };
|
|
|
showPlanChangeDialog.value = true;
|
|
|
};
|
|
|
+
|
|
|
+const showQualityIssueDialog = ref(false);
|
|
|
+const createQualityIssueHandle = (row) => {
|
|
|
+ curSopData.value = {
|
|
|
+ ...row,
|
|
|
+ flowDeploymentId: appStore.getFlowDetailByType('QUALITY_PROBLEM_FLOW')
|
|
|
+ ?.flowDeploymentId,
|
|
|
+ };
|
|
|
+ showQualityIssueDialog.value = true;
|
|
|
+};
|
|
|
</script>
|