md

src/config/constants.js

@@ -183,10 +183,9 @@ export const WARN_TYPE = {
 
 //SOP管理-延期预警-跟进状态
 export const WARN_FLOW_STATUS = {
-  NOT_START: '未跟进',
-  FOLLOW: '跟进',
-  CLOSE: '关闭',
-  RESTART: '重启',
+  NOT_START: '待跟进',
+  FOLLOW: '跟进中',
+  CLOSE: '已关闭',
 };
 
 //违规登记类型
@@ -197,10 +196,9 @@ export const VIOLATION_TYPE = {
 };
 //SOP管理-违规登记-跟进状态
 export const VIOLATION_FLOW_STATUS = {
-  NOT_START: '未跟进',
-  FOLLOW: '跟进',
-  CLOSE: '关闭',
-  RESTART: '重启',
+  NOT_START: '待跟进',
+  FOLLOW: '跟进中',
+  CLOSE: '已关闭',
 };
 //项目计划变更-变更类型
 export const PLAN_CHANGE_TYPE = {

src/views/sop/sop-monitor/delay-warning/flow-dialog.vue

@@ -1,137 +1,177 @@
 <template>
-  <my-dialog
+  <my-drawer
+    class="sop-dialog"
     :visible="visible"
-    @close="emit('update:visible', false)"
-    :header="`跟进`"
-    :width="1000"
+    :header="title"
+    size="80%"
+    attach="body"
     :closeOnOverlayClick="false"
+    :close-btn="true"
+    :footer="false"
+    destroyOnClose
+    @close="emit('update:visible', false)"
   >
-    <t-form ref="formRef" :data="formData" labelWidth="100px" :rules="rules">
-      <div class="form-group-title">预警信息</div>
-      <t-row :gutter="[0, 10]">
-        <t-col :span="3">
-          <t-form-item label="服务单元：">
-            {{ asyncDetail.service }}</t-form-item
-          >
-        </t-col>
-        <t-col :span="3">
-          <t-form-item label="SOP流水号：">
-            {{ asyncDetail.sopNo }}
-          </t-form-item>
-        </t-col>
-        <t-col :span="3">
-          <t-form-item label="客户类型：">
-            {{ asyncDetail.customType }}
-          </t-form-item>
-        </t-col>
-        <t-col :span="3">
-          <t-form-item label="客户名称：">
-            {{ asyncDetail.custom }}
-          </t-form-item>
-        </t-col>
-        <t-col :span="3">
-          <t-form-item label="预警时间：">
-            {{ dateFormat(asyncDetail.warnTime, 'yyyy-MM-dd hh:mm') }}
-          </t-form-item>
-        </t-col>
-        <t-col :span="3">
-          <t-form-item label="节点负责人：">
-            {{ asyncDetail.userName }}
-          </t-form-item>
-        </t-col>
-        <t-col :span="3">
-          <t-form-item label="预警类型：">
-            {{ WARN_TYPE[asyncDetail.type] || asyncDetail.type }}
-          </t-form-item>
-        </t-col>
-        <t-col :span="3">
-          <t-form-item label="预警字段：">
-            {{ asyncDetail.fieldObj }}
-          </t-form-item>
-        </t-col>
-      </t-row>
-      <div class="form-group-title next-title">新增跟进</div>
-      <t-row :gutter="[0, 10]">
-        <t-col :span="12">
-          <t-form-item label="跟进人：">
-            {{ userStore.user.realName }}</t-form-item
-          >
-        </t-col>
-        <t-col :span="12">
-          <t-form-item label="跟进说明：" name="remark">
-            <t-textarea
-              v-model="formData.remark"
-              tips="限100字以内"
-              :maxlength="100"
-            ></t-textarea>
-          </t-form-item>
-        </t-col>
-        <t-col :span="12">
-          <t-form-item label="附件说明：">
-            <my-upload @change="fileChange"></my-upload>
-          </t-form-item>
-        </t-col>
-      </t-row>
-      <div class="m-t-20px">
-        <t-button theme="primary" @click="save">保存</t-button>
-        <t-link
-          theme="primary"
-          underline
-          class="m-l-40px"
-          @click="showHistory = !showHistory"
-          >查看历史跟进记录</t-link
+    <div class="sop-step">
+      <t-collapse class="sop-step-mid" defaultExpandAll>
+        <t-collapse-panel disabled>
+          <template #expandIcon></template>
+          <template #header> SOP信息 </template>
+          <t-form colon label-width="80px">
+            <t-row :gutter="[0, 4]">
+              <t-col :span="3">
+                <t-form-item label="服务单元">
+                  {{ curRow.service }}</t-form-item
+                >
+              </t-col>
+              <t-col :span="3">
+                <t-form-item label="SOP流水号">
+                  {{ curRow.sopNo }}
+                </t-form-item>
+              </t-col>
+              <t-col :span="3">
+                <t-form-item label="客户类型">
+                  {{ curRow.customType }}
+                </t-form-item>
+              </t-col>
+              <t-col :span="3">
+                <t-form-item label="客户名称">
+                  {{ curRow.custom }}
+                </t-form-item>
+              </t-col>
+              <t-col :span="3">
+                <t-form-item label="预警时间">
+                  {{ timestampFilter(curRow.warnTime, 'mm') }}
+                </t-form-item>
+              </t-col>
+              <t-col :span="3">
+                <t-form-item label="节点负责人">
+                  {{ curRow.userName }}
+                </t-form-item>
+              </t-col>
+              <t-col :span="3">
+                <t-form-item label="预警类型">
+                  {{ warnTypeFilter(curRow.type) }}
+                </t-form-item>
+              </t-col>
+              <t-col :span="3">
+                <t-form-item label="预警字段">
+                  {{ curRow.fieldObj }}
+                </t-form-item>
+              </t-col>
+            </t-row>
+          </t-form>
+        </t-collapse-panel>
+      </t-collapse>
+
+      <div class="sop-step-list" style="flex-direction: column">
+        <t-form
+          ref="formRef"
+          :data="formData"
+          labelWidth="100px"
+          :rules="rules"
+          colon
+          class="sop-step-body"
         >
+          <t-row :gutter="[0, 30]">
+            <t-col :span="12">
+              <div class="form-group-title"> 新增跟进 </div>
+            </t-col>
+            <t-col :span="12">
+              <t-form-item label="跟进人">
+                {{ userStore.user.realName }}</t-form-item
+              >
+            </t-col>
+            <t-col :span="12">
+              <t-form-item label="跟进说明" name="remark">
+                <t-textarea
+                  v-model="formData.remark"
+                  tips="限100字以内"
+                  :maxlength="100"
+                ></t-textarea>
+              </t-form-item>
+            </t-col>
+            <t-col :span="12">
+              <t-form-item label="附件说明">
+                <my-upload @change="fileChange"></my-upload>
+              </t-form-item>
+            </t-col>
+
+            <t-col :span="12">
+              <div class="m-b-10px">
+                历史明细查阅
+                <t-link
+                  theme="primary"
+                  class="m-l-10px"
+                  @click="showHistory = !showHistory"
+                  >查看 <ChevronUpIcon v-if="showHistory" />
+                  <ChevronDownIcon v-else /></t-link
+              ></div>
+              <t-table
+                v-if="showHistory"
+                size="small"
+                row-key="id"
+                :columns="columns"
+                :data="tableData"
+                bordered
+              >
+                <template #createTime="{ row, col }">
+                  {{ timestampFilter(row[col.colKey], 'mm') }}
+                </template>
+                <template #attachment="{ row, col }">
+                  <attachment-view
+                    :ids="row[col.colKey]"
+                    :imgSize="60"
+                  ></attachment-view>
+                </template>
+              </t-table>
+            </t-col>
+          </t-row>
+        </t-form>
+        <t-space class="sop-step-footer">
+          <t-button theme="primary" @click="save">保存</t-button>
+          <t-button theme="default" @click="emit('update:visible', false)"
+            >取消</t-button
+          >
+        </t-space>
       </div>
-      <template v-if="showHistory">
-        <div class="form-group-title next-title">历史明细查阅</div>
-        <t-table
-          size="small"
-          row-key="id"
-          :columns="columns"
-          :data="tableData"
-          bordered
-        ></t-table>
-      </template>
-    </t-form>
-    <template #foot>
-      <!-- <t-button theme="default" @click="emit('update:visible', false)"
-        >取消</t-button
-      >
-      <t-button theme="primary" @click="save">保存</t-button> -->
-    </template>
-  </my-dialog>
+    </div>
+  </my-drawer>
 </template>
 <script setup name="DelayWarnFlowDialog">
 import useClearDialog from '@/hooks/useClearDialog';
+import { ChevronUpIcon, ChevronDownIcon } from 'tdesign-icons-vue-next';
+import { MessagePlugin } from 'tdesign-vue-next';
+
 import { ref, computed } from 'vue';
-import { WARN_TYPE, WARN_FLOW_STATUS } from '@/config/constants';
-import { dateFormat } from '@/utils/tool';
 import { useUserStore } from '@/store';
-import { delayWarnDetail, delayWarnDetailList, flowDelayWarn } from '@/api/sop';
+import { delayWarnDetailList, flowDelayWarn } from '@/api/sop';
+import { timestampFilter, warnTypeFilter } from '@/utils/filter';
+
 const userStore = useUserStore();
 const props = defineProps({
   visible: Boolean,
-  curRow: Object,
+  curRow: {
+    type: Object,
+    default() {
+      return {};
+    },
+  },
 });
-const { curRow } = props;
 const emit = defineEmits(['update:visible', 'success']);
+
 const formRef = ref(null);
-const asyncDetail = ref({});
 const tableData = ref([]);
 const showHistory = ref(false);
+
+const title = computed(() => {
+  return `预警信息(预警流水号：${props.curRow.code})`;
+});
+
 const getDetail = async () => {
-  //编辑状态下获取回显数据的接口请求业务,如果curRow里的字段够用，就直接把curRow里的字段赋值给formData
-  // for (let key in formData) {
-  //   formData[key] = props.curRow[key];
-  // }
-  delayWarnDetail(curRow.id).then((res) => {
-    asyncDetail.value = res;
-  });
-  delayWarnDetailList(curRow.id).then((res) => {
-    tableData.value = res;
-  });
+  const res = await delayWarnDetailList(props.curRow.id);
+  tableData.value = res;
 };
-const { formData, isEdit } = useClearDialog(
+const { formData } = useClearDialog(
   {
     attachmentIds: '',
     remark: '',
@@ -152,30 +192,28 @@ const rules = {
   ],
 };
 const fileChange = (fileList) => {
-  formData.attachmentIds = fileList.map((item) => item.response.id).join(',');
+  formData.attachmentIds = fileList.map((item) => item.id).join(',');
 };
+
 const columns = [
-  { colKey: 'createTime', title: '跟进时间' },
+  { colKey: 'createTime', title: '跟进时间', width: 180 },
   { colKey: 'createName', title: '跟进人' },
   { colKey: 'remark', title: '跟进说明' },
-  { colKey: 'attachmentIds', title: '附件说明' },
+  { colKey: 'attachmentIds', title: '附件说明', cell: 'attachment' },
 ];
-const flowHandler = () => {
-  flowDelayWarn({
+
+const save = async () => {
+  const valid = await formRef.value.validate();
+  if (valid !== true) return;
+
+  const res = await flowDelayWarn({
     ...formData,
-    delayWarnId: curRow.id,
-    id: asyncDetail.value.id || undefined,
-    createId: asyncDetail.createId || undefined,
-    createTime: asyncDetail.createTime || undefined,
-  }).then((res) => {
-    emit('success');
-  });
-};
-const save = () => {
-  formRef.value.validate().then(async (result) => {
-    if (result === true) {
-      flowHandler();
-    }
-  });
+    delayWarnId: props.curRow.id,
+  }).catch(() => {});
+  if (!res) return;
+
+  MessagePlugin.success('保存成功');
+  emit('update:visible', false);
+  emit('success');
 };
 </script>

src/views/sop/sop-monitor/delay-warning/index.vue

@@ -29,18 +29,50 @@
           {{ warnTypeFilter(row[col.colKey]) }}
         </template>
         <template #status="{ col, row }">
-          {{ warnFlowStatusFilter(row[col.colKey]) }}
+          <t-tag :theme="statusTheme[row[col.colKey]]" variant="light">{{
+            warnFlowStatusFilter(row[col.colKey])
+          }}</t-tag>
         </template>
         <template #warnTime="{ col, row }">
           {{ timestampFilter(row[col.colKey]) }}
         </template>
+        <template #operate="{ row }">
+          <div class="table-operations">
+            <t-link
+              v-if="row.status !== 'CLOSE'"
+              theme="primary"
+              hover="color"
+              @click="handleFollow(row)"
+            >
+              跟进
+            </t-link>
+            <t-link
+              v-if="row.status === 'CLOSE'"
+              theme="primary"
+              hover="color"
+              @click="restartHandler(row)"
+            >
+              重启
+            </t-link>
+            <t-link
+              v-else
+              theme="primary"
+              hover="color"
+              @click="closeHandler(row)"
+            >
+              关闭
+            </t-link>
+          </div>
+        </template>
       </t-table>
     </div>
-    <FlowDialog
-      v-model:visible="showFlowDialog"
+
+    <!-- DelayWarnFlowDialog -->
+    <delay-warn-flow-dialog
+      v-model:visible="showDelayWarnFlowDialog"
       :curRow="curRow"
-      @success="editSuccess"
-    ></FlowDialog>
+      @success="fetchData"
+    ></delay-warn-flow-dialog>
   </div>
 </template>
 
@@ -57,13 +89,20 @@ import {
   warnFlowStatusFilter,
   timestampFilter,
 } from '@/utils/filter';
-import FlowDialog from './flow-dialog';
+import DelayWarnFlowDialog from './flow-dialog';
+
+const showDelayWarnFlowDialog = ref(false);
+const curRow = ref({});
+
+const statusTheme = {
+  NOT_START: 'warning',
+  FOLLOW: 'success',
+  CLOSE: 'default',
+};
 
-const showFlowDialog = ref(false);
-const curRow = ref(null);
-const editSuccess = () => {
-  MessagePlugin.success('操作成功');
-  showFlowDialog.value = false;
+const handleFollow = (row) => {
+  curRow.value = row;
+  showDelayWarnFlowDialog.value = true;
 };
 const restartHandler = (row) => {
   const confirmDia = DialogPlugin({
@@ -71,12 +110,12 @@ const restartHandler = (row) => {
     body: `您确定要重启当前预警信息吗？`,
     confirmBtn: '确定',
     cancelBtn: '取消',
-    onConfirm: () => {
-      restartDelayWarn(row.id).then(() => {
-        confirmDia.hide();
-        MessagePlugin.success('操作成功');
-        fetchData();
-      });
+    onConfirm: async () => {
+      confirmDia.hide();
+      const res = await restartDelayWarn(row.id).catch(() => {});
+      if (!res) return;
+      MessagePlugin.success('操作成功');
+      fetchData();
     },
   });
 };
@@ -86,12 +125,12 @@ const closeHandler = (row) => {
     body: `您确定要关闭当前预警信息吗？`,
     confirmBtn: '确定',
     cancelBtn: '取消',
-    onConfirm: () => {
-      closeDelayWarn(row.id).then(() => {
-        confirmDia.hide();
-        MessagePlugin.success('操作成功');
-        fetchData();
-      });
+    onConfirm: async () => {
+      confirmDia.hide();
+      const res = await closeDelayWarn(row.id).catch(() => {});
+      if (!res) return;
+      MessagePlugin.success('操作成功');
+      fetchData();
     },
   });
 };
@@ -109,59 +148,17 @@ const columns = [
     title: '预警类型',
     width: 150,
   },
-  { colKey: 'fieldObj', title: '预警字段' },
+  { colKey: 'fieldObj', title: '预警字段', width: 150 },
   {
     colKey: 'status',
     title: '跟进状态',
-    width: 150,
+    width: 100,
   },
   {
     title: '管理',
     colKey: 'operate',
     fixed: 'right',
-    width: 130,
-    cell: (h, { row }) => {
-      return (
-        <div class="table-operations">
-          {row.status === 'NOT_START' ? (
-            <t-link
-              theme="primary"
-              hover="color"
-              onClick={(e) => {
-                e.stopPropagation();
-                curRow.value = row;
-                showFlowDialog.value = true;
-              }}
-            >
-              跟进
-            </t-link>
-          ) : null}
-          {row.status === 'CLOSE' ? (
-            <t-link
-              theme="primary"
-              hover="color"
-              onClick={(e) => {
-                e.stopPropagation();
-                restartHandler(row);
-              }}
-            >
-              重启
-            </t-link>
-          ) : (
-            <t-link
-              theme="primary"
-              hover="color"
-              onClick={(e) => {
-                e.stopPropagation();
-                closeHandler(row);
-              }}
-            >
-              关闭
-            </t-link>
-          )}
-        </div>
-      );
-    },
+    width: 120,
   },
 ];
 
@@ -256,10 +253,14 @@ const transParams = computed(() => {
   };
 });
 
-const { loading, pagination, tableData, onChange, fetchData, search } =
-  useFetchTable(getDelayWarnList, {
-    params: transParams,
-  });
+const {
+  loading: tableLoading,
+  pagination,
+  tableData,
+  onChange,
+  fetchData,
+  search,
+} = useFetchTable(getDelayWarnList, {
+  params: transParams,
+});
 </script>
-
-<style></style>

src/views/sop/sop-monitor/violation-registration/flow-dialog.vue

@@ -8,6 +8,7 @@
     :closeOnOverlayClick="false"
     :close-btn="true"
     :footer="false"
+    destroyOnClose
     @close="emit('update:visible', false)"
   >
     <div class="sop-step">
@@ -57,7 +58,7 @@
                 }}</t-form-item>
               </t-col>
               <t-col :span="12">
-                <t-form-item label="截图说明">
+                <t-form-item label="附件说明">
                   <attachment-view
                     :ids="curRow.attachmentIds"
                   ></attachment-view>
@@ -95,7 +96,7 @@
               </t-form-item>
             </t-col>
             <t-col :span="12">
-              <t-form-item label="截图说明">
+              <t-form-item label="附件说明">
                 <my-upload @change="fileChange"></my-upload>
               </t-form-item>
             </t-col>
@@ -164,7 +165,6 @@ const props = defineProps({
 const emit = defineEmits(['update:visible', 'success']);
 
 const formRef = ref(null);
-const asyncDetail = ref({});
 const tableData = ref([]);
 const showHistory = ref(false);
 
@@ -201,7 +201,7 @@ const fileChange = (fileList) => {
   formData.attachmentIds = fileList.map((item) => item.id).join(',');
 };
 const columns = [
-  { colKey: 'createTime', title: '跟进时间' },
+  { colKey: 'createTime', title: '跟进时间', width: 180 },
   { colKey: 'createName', title: '跟进人' },
   { colKey: 'remark', title: '跟进说明' },
   { colKey: 'attachmentIds', title: '附件说明', cell: 'attachment' },

src/views/sop/sop-monitor/violation-registration/index.vue

@@ -41,7 +41,9 @@
           {{ violationTypeFilter(row[col.colKey]) }}
         </template>
         <template #status="{ col, row }">
-          {{ violationFlowStatusFilter(row[col.colKey]) }}
+          <t-tag :theme="statusTheme[row[col.colKey]]" variant="light">{{
+            violationFlowStatusFilter(row[col.colKey])
+          }}</t-tag>
         </template>
         <template #createTime="{ col, row }">
           {{ timestampFilter(row[col.colKey]) }}
@@ -105,6 +107,13 @@ import ViolationFlowDialog from './flow-dialog.vue';
 const showViolationFlowDialog = ref(false);
 const curRow = ref({});
 
+const statusTheme = {
+  NOT_START: 'warning',
+  FOLLOW: 'success',
+  CLOSE: 'default',
+  RESTART: 'primary',
+};
+
 const handleFollow = (row) => {
   curRow.value = row;
   showViolationFlowDialog.value = true;
@@ -157,7 +166,7 @@ const columns = [
   {
     colKey: 'status',
     title: '跟进状态',
-    width: 120,
+    width: 100,
   },
   { colKey: 'createTime', title: '登记时间', width: 180 },
   { colKey: 'createName', title: '登记人', width: 140 },