静态页面：延期预警、违规登记

package.json

@@ -29,7 +29,7 @@
     "mockjs": "^1.1.0",
     "nprogress": "^0.2.0",
     "pinia": "^2.0.27",
-    "tdesign-vue-next": "^1.3.12",
+    "tdesign-vue-next": "^1.4.1",
     "tvision-color": "^1.5.0",
     "unplugin-vue-setup-extend-plus": "^1.0.0",
     "vue": "^3.3.4",

src/mock/index.js

@@ -105,6 +105,30 @@ const menusList = [
     sort: 4,
     name: 'ProjectChangeReport',
   },
+  {
+    id: 15,
+    title: 'SOP监控',
+    parentId: 8,
+    url: '/sop/sop-monitor',
+    sort: 2,
+    name: 'SopMonitor',
+  },
+  {
+    id: 16,
+    title: '延期预警',
+    parentId: 15,
+    url: '/sop/sop-monitor/delay-warning',
+    sort: 2,
+    name: 'DelayWarning',
+  },
+  {
+    id: 17,
+    title: '违规登记',
+    parentId: 15,
+    url: '/sop/sop-monitor/violation-registration',
+    sort: 2,
+    name: 'ViolationRegistration',
+  },
 ];
 
 export const menusApi = Mock.mock('/api/getMenus', 'get', () => {

src/router/modules/sop.js

@@ -78,5 +78,37 @@ export default {
         },
       ],
     },
+    {
+      name: 'SopMonitor',
+      path: '/sop/sop-monitor',
+      redirect: '/sop/sop-monitor/delay-warning',
+      meta: {
+        title: 'SOP监控',
+        sort: 1,
+        icon: 'browse',
+      },
+      children: [
+        {
+          name: 'DelayWarning',
+          path: '/sop/sop-monitor/delay-warning',
+          component: () =>
+            import('@/views/sop/sop-monitor/delay-warning/index.vue'),
+          meta: {
+            title: '延期预警',
+            sort: 2,
+          },
+        },
+        {
+          name: 'ViolationRegistration',
+          path: '/sop/sop-monitor/violation-registration',
+          component: () =>
+            import('@/views/sop/sop-monitor/violation-registration/index.vue'),
+          meta: {
+            title: '违规登记',
+            sort: 3,
+          },
+        },
+      ],
+    },
   ],
 };

src/views/sop/sop-manage/office-sop/index.vue

@@ -25,6 +25,10 @@
       >
       </t-table>
     </div>
+    <PlanChangeDialog
+      v-model:visible="showPlanChangeDialog"
+      :rowData="rowData"
+    ></PlanChangeDialog>
   </div>
 </template>
 
@@ -33,6 +37,9 @@ import { ref, reactive } from 'vue';
 import { getTableData } from '@/api/test';
 import useFetchTable from '@/hooks/useFetchTable';
 import { useRouter } from 'vue-router';
+import PlanChangeDialog from './plan-change-dialog.vue';
+const showPlanChangeDialog = ref(false);
+const rowData = ref({});
 const selectedRowKeys = ref([]);
 const selectChange = (value, { selectedRowData }) => {
   selectedRowKeys.value = value;
@@ -51,7 +58,7 @@ const columns = [
     title: '操作',
     colKey: 'operate',
     fixed: 'right',
-    width: 300,
+    width: 400,
     cell: (h, { row }) => {
       return (
         <div class="table-operations">
@@ -93,6 +100,16 @@ const columns = [
           >
             上报质量问题
           </t-link>
+          <t-link
+            theme="primary"
+            hover="color"
+            onClick={(e) => {
+              e.stopPropagation();
+              planChange(row);
+            }}
+          >
+            计划变更报备
+          </t-link>
         </div>
       );
     },
@@ -125,6 +142,11 @@ const createSopFlow = (row) => {
 const toCurSopFlow = (row) => {
   router.push({ name: 'SopStep' });
 };
+
+const planChange = (row) => {
+  rowData.value = row;
+  showPlanChangeDialog.value = true;
+};
 </script>
 
 <style></style>

src/views/sop/sop-manage/office-sop/plan-change-dialog.vue

@@ -0,0 +1,38 @@
+<template>
+  <my-dialog
+    :visible="visible"
+    @close="emit('update:visible', false)"
+    header="项目计划变更"
+    :width="800"
+    :closeOnOverlayClick="false"
+  >
+    <t-form ref="formRef" :model="formData" labelWidth="120px"> </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>
+</template>
+<script setup name="PlanChangeDialog">
+import { ref } from 'vue';
+import useClearDialog from '@/hooks/useClearDialog';
+const emit = defineEmits(['update:visible', 'success']);
+const formRef = ref(null);
+
+const props = defineProps({
+  visible: Boolean,
+  title: String,
+});
+const { data: formData } = useClearDialog(
+  {
+    a: '',
+  },
+  props
+);
+const save = () => {
+  //ajax...
+  emit('success');
+};
+</script>

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

@@ -0,0 +1,163 @@
+<template>
+  <div class="delay-warning flex flex-col">
+    <SearchForm :fields="fields" :params="params"></SearchForm>
+    <div class="flex-1 page-wrap">
+      <t-table
+        size="small"
+        row-key="id"
+        :columns="columns"
+        :data="tableData"
+        bordered
+        :pagination="{
+          defaultCurrent: 1,
+          defaultPageSize: 10,
+          onChange,
+          total: pagination.total,
+        }"
+      >
+      </t-table>
+    </div>
+  </div>
+</template>
+
+<script setup lang="jsx" name="DelayWarning">
+import { reactive, ref } from 'vue';
+import { getTableData } from '@/api/test';
+import useFetchTable from '@/hooks/useFetchTable';
+
+const rowData = ref({});
+
+const columns = [
+  { colKey: 'a', title: '服务单元' },
+  { colKey: 'b', title: '预警流水号' },
+  { colKey: 'c', title: '预警时间' },
+  { colKey: 'd', title: 'SOP流水号' },
+  { colKey: 'e', title: '节点负责人' },
+  { colKey: 'f', title: '客户名称' },
+  { colKey: 'g', title: '项目单号' },
+  { colKey: 'h', title: '项目名称' },
+  { colKey: 'i', title: '预警类型' },
+  { colKey: 'j', title: '预警字段' },
+  { colKey: 'k', title: '跟进状态' },
+  {
+    title: '操作',
+    colKey: 'operate',
+    fixed: 'right',
+    width: 200,
+    cell: (h, { row }) => {
+      return (
+        <div class="table-operations">
+          <t-link
+            theme="primary"
+            hover="color"
+            onClick={(e) => {
+              e.stopPropagation();
+            }}
+          >
+            跟进
+          </t-link>
+          <t-link
+            theme="primary"
+            hover="color"
+            onClick={(e) => {
+              e.stopPropagation();
+            }}
+          >
+            重启
+          </t-link>
+          <t-link
+            theme="primary"
+            hover="color"
+            onClick={(e) => {
+              e.stopPropagation();
+            }}
+          >
+            关闭
+          </t-link>
+        </div>
+      );
+    },
+  },
+];
+
+const fields = ref([
+  {
+    prop: 'a',
+    label: '服务单元',
+    type: 'select',
+    labelWidth: '80px',
+    colSpan: 5,
+  },
+  {
+    prop: 'b',
+    label: '预警类型',
+    type: 'select',
+    labelWidth: '80px',
+    colSpan: 5,
+  },
+  {
+    prop: 'c',
+    label: '跟进状态',
+    type: 'select',
+    labelWidth: '80px',
+    colSpan: 5,
+  },
+  {
+    prop: 'd',
+    label: '客户名称',
+    type: 'select',
+    labelWidth: '80px',
+    colSpan: 5,
+  },
+  {
+    type: 'buttons',
+    colSpan: 3,
+    children: [
+      {
+        type: 'button',
+        text: '查询',
+      },
+    ],
+  },
+  {
+    prop: 'e',
+    label: 'SOP流水号',
+    labelWidth: '80px',
+    colSpan: 5,
+  },
+  {
+    prop: 'f',
+    label: '预警时间',
+    type: 'daterange',
+    labelWidth: '80px',
+    colSpan: 10,
+  },
+  {
+    prop: 'g',
+    label: '预警字段',
+    labelWidth: '80px',
+    colSpan: 5,
+  },
+]);
+const params = reactive({
+  a: '',
+  b: '',
+  c: '',
+  d: '',
+  e: '',
+  f: [],
+  g: '',
+});
+
+const {
+  loading: tableLoading,
+  pagination,
+  tableData,
+  fetchData,
+  onChange,
+} = useFetchTable(getTableData);
+
+const refresh = async () => {};
+</script>
+
+<style></style>

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

@@ -0,0 +1,172 @@
+<template>
+  <div class="violation-registration flex flex-col">
+    <SearchForm :fields="fields" :params="params"></SearchForm>
+    <div class="flex-1 page-wrap">
+      <t-table
+        size="small"
+        row-key="id"
+        :columns="columns"
+        :data="tableData"
+        bordered
+        :pagination="{
+          defaultCurrent: 1,
+          defaultPageSize: 10,
+          onChange,
+          total: pagination.total,
+        }"
+      >
+      </t-table>
+    </div>
+  </div>
+</template>
+
+<script setup lang="jsx" name="ViolationRegistration">
+import { reactive, ref } from 'vue';
+import { getTableData } from '@/api/test';
+import useFetchTable from '@/hooks/useFetchTable';
+
+const rowData = ref({});
+
+const columns = [
+  { colKey: 'a', title: '违规流水号' },
+  { colKey: 'b', title: 'SOP流水号' },
+  { colKey: 'c', title: '节点负责人' },
+  { colKey: 'd', title: '客户名称' },
+  { colKey: 'e', title: '项目单号' },
+  { colKey: 'f', title: '项目名称' },
+  { colKey: 'g', title: '违规类型' },
+  { colKey: 'h', title: '违规情况' },
+  { colKey: 'i', title: '跟进状态' },
+  { colKey: 'j', title: '登记时间' },
+  { colKey: 'k', title: '登记人' },
+  {
+    title: '操作',
+    colKey: 'operate',
+    fixed: 'right',
+    width: 200,
+    cell: (h, { row }) => {
+      return (
+        <div class="table-operations">
+          <t-link
+            theme="primary"
+            hover="color"
+            onClick={(e) => {
+              e.stopPropagation();
+            }}
+          >
+            跟进
+          </t-link>
+          <t-link
+            theme="primary"
+            hover="color"
+            onClick={(e) => {
+              e.stopPropagation();
+            }}
+          >
+            重启
+          </t-link>
+          <t-link
+            theme="primary"
+            hover="color"
+            onClick={(e) => {
+              e.stopPropagation();
+            }}
+          >
+            关闭
+          </t-link>
+        </div>
+      );
+    },
+  },
+];
+
+const fields = ref([
+  {
+    prop: 'a',
+    label: '服务单元',
+    type: 'select',
+    labelWidth: '100px',
+    colSpan: 4.5,
+  },
+  {
+    prop: 'b',
+    label: '违规类型',
+    type: 'select',
+    labelWidth: '100px',
+    colSpan: 4.5,
+  },
+  {
+    prop: 'c',
+    label: '跟进状态',
+    type: 'select',
+    labelWidth: '100px',
+    colSpan: 4.5,
+  },
+  {
+    prop: 'd',
+    label: '节点负责人',
+    type: 'select',
+    labelWidth: '100px',
+    colSpan: 4.5,
+  },
+  {
+    type: 'buttons',
+    colSpan: 3,
+    children: [
+      {
+        type: 'button',
+        text: '查询',
+      },
+    ],
+  },
+  {
+    prop: 'e',
+    label: '客户名称',
+    type: 'select',
+    labelWidth: '100px',
+    colSpan: 4.5,
+  },
+
+  {
+    prop: 'f',
+    label: 'SOP流水号',
+    labelWidth: '100px',
+    colSpan: 4.5,
+  },
+  {
+    prop: 'g',
+    label: '登记人',
+    labelWidth: '100px',
+    colSpan: 4.5,
+  },
+  {
+    prop: 'h',
+    label: '预警时间',
+    type: 'daterange',
+    labelWidth: '100px',
+    colSpan: 9,
+  },
+]);
+const params = reactive({
+  a: '',
+  b: '',
+  c: '',
+  d: '',
+  e: '',
+  f: '',
+  g: '',
+  h: [],
+});
+
+const {
+  loading: tableLoading,
+  pagination,
+  tableData,
+  fetchData,
+  onChange,
+} = useFetchTable(getTableData);
+
+const refresh = async () => {};
+</script>
+
+<style></style>