违规登记

src/api/sop.js

@@ -4,7 +4,6 @@ import { request } from '@/utils/request.js';
 export const getDelayWarnList = (data) =>
   request({
     url: '/api/admin/tb/delay/warn/query',
-    method: 'post',
     params: data,
   });
 
@@ -12,28 +11,67 @@ export const getDelayWarnList = (data) =>
 export const closeDelayWarn = (id) =>
   request({
     url: '/api/admin/tb/delay/warn/close?id=' + id,
-    method: 'post',
     loading: true,
   });
 //重启延期预警
 export const restartDelayWarn = (id) =>
   request({
     url: '/api/admin/tb/delay/warn/restart?id=' + id,
-    method: 'post',
     loading: true,
   });
-//延期预警明细
+//单个延期预警的详情
 export const delayWarnDetail = (id) =>
+  request({
+    url: '/api/admin/tb/delay/warn/get?id=' + id,
+    method: 'get',
+  });
+//延期预警明细表
+export const delayWarnDetailList = (id) =>
   request({
     url: '/api/admin/tb/delay/warn/detail/list?id=' + id,
-    method: 'post',
   });
 
-//延期预警跟进
+//延期预警跟进提交
 export const flowDelayWarn = (data) =>
   request({
     url: '/api/admin/tb/delay/warn/detail/save',
-    method: 'post',
+    data,
+    loading: true,
+  });
+
+//违规登记列表
+export const getViolationList = (data) =>
+  request({
+    url: '/api/admin/tb/violation/query',
+    params: data,
+  });
+//关闭单个违规登记
+export const closeViolation = (id) =>
+  request({
+    url: '/api/admin/tb/violation/close?id=' + id,
+    loading: true,
+  });
+//重启违规登记
+export const restartViolation = (id) =>
+  request({
+    url: '/api/admin/tb/violation/restart?id=' + id,
+    loading: true,
+  });
+//单个违规登记的详情
+export const violationDetail = (id) =>
+  request({
+    url: '/api/admin/tb/violation/get?id=' + id,
+    method: 'get',
+  });
+//违规登记明细表
+export const violationDetailList = (id) =>
+  request({
+    url: '/api/admin/tb/violation/detail/query?id=' + id,
+  });
+//违规登记跟进提交
+export const flowViolation = (data) =>
+  request({
+    url: '/api/admin/tb/violation/detail/save',
     data,
     loading: true,
   });

src/components/global/my-upload/index.vue

@@ -6,7 +6,6 @@
     :tips="`最多只能上传 ${imgLength} 张图片`"
     accept="image/*"
     :abridge-name="[6, 6]"
-    :disabled="disabled"
     :auto-upload="true"
     :upload-all-files-in-one-request="false"
     multiple
@@ -42,10 +41,6 @@ const props = defineProps({
     type: Number,
     default: 20 * 1024,
   },
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
 });
 const files = ref([]);
 const checkFileFormat = (fileType) => {
@@ -76,25 +71,20 @@ const handleFail = ({ file }) => {
 };
 
 const upload = async (files) => {
-  console.log('file', files);
   let formData = new FormData();
-
   const file = files[0].raw;
   const md5 = await getFileMD5(file);
-  console.log('md5', md5);
-
   formData.append('file', file);
   formData.append('type', 'FILE');
 
   const res = await uploadFiles(formData, md5).catch(() => {});
-  console.log('res', res);
   if (res) {
     return { status: 'success', response: res };
   } else {
     return { status: 'fail', error: '上传失败' };
   }
 };
-const change = (a, b, c) => {
-  console.log(a, b, c);
+const change = (fileList) => {
+  emit('change', fileList);
 };
 </script>

src/config/constants.js

@@ -142,3 +142,17 @@ export const WARN_FLOW_STATUS = {
   CLOSE: '关闭',
   RESTART: '重启',
 };
+
+//违规登记类型
+export const VIOLATION_TYPE = {
+  CONTENT_ERROR: '内容错误虚假',
+  LOGIC_ERROR: '逻辑不合理',
+  OTHER: '其他',
+};
+//SOP管理-违规登记-跟进状态
+export const VIOLATION_FLOW_STATUS = {
+  NOT_START: '未跟进',
+  FOLLOW: '跟进',
+  CLOSE: '关闭',
+  RESTART: '重启',
+};

src/style/animation.less

@@ -52,7 +52,7 @@
 /* fade-slide */
 .fade-slide-leave-active,
 .fade-slide-enter-active {
-  transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
+  transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
 }
 
 .fade-slide-enter-from {

src/utils/tool.js

@@ -176,6 +176,9 @@ export const dateFormat = (
   fmt = 'yyyy-MM-dd hh:mm:ss',
   isDefault = '-'
 ) => {
+  if (!date) {
+    return '-';
+  }
   if (date.toString().length === 10) {
     date *= 1000;
   }

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

@@ -6,45 +6,47 @@
     :width="1000"
     :closeOnOverlayClick="false"
   >
-    <t-form ref="formRef" :data="formData" labelWidth="85px" :rules="rules">
+    <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="服务单元："> {{ curRow.service }}</t-form-item>
+          <t-form-item label="服务单元：">
+            {{ asyncDetail.service }}</t-form-item
+          >
         </t-col>
         <t-col :span="3">
           <t-form-item label="SOP流水号：">
-            {{ curRow.sopNo }}
+            {{ asyncDetail.sopNo }}
           </t-form-item>
         </t-col>
         <t-col :span="3">
           <t-form-item label="客户类型：">
-            {{ curRow.customType }}
+            {{ asyncDetail.customType }}
           </t-form-item>
         </t-col>
         <t-col :span="3">
           <t-form-item label="客户名称：">
-            {{ curRow.custom }}
+            {{ asyncDetail.custom }}
           </t-form-item>
         </t-col>
         <t-col :span="3">
           <t-form-item label="预警时间：">
-            {{ dateFormat(curRow.warnTime, 'yyyy-MM-dd hh:mm') }}
+            {{ dateFormat(asyncDetail.warnTime, 'yyyy-MM-dd hh:mm') }}
           </t-form-item>
         </t-col>
         <t-col :span="3">
           <t-form-item label="节点负责人：">
-            {{ curRow.userName }}
+            {{ asyncDetail.userName }}
           </t-form-item>
         </t-col>
         <t-col :span="3">
           <t-form-item label="预警类型：">
-            {{ WARN_TYPE[curRow.type] || curRow.type }}
+            {{ WARN_TYPE[asyncDetail.type] || asyncDetail.type }}
           </t-form-item>
         </t-col>
         <t-col :span="3">
           <t-form-item label="预警字段：">
-            {{ curRow.fieldObj }}
+            {{ asyncDetail.fieldObj }}
           </t-form-item>
         </t-col>
       </t-row>
@@ -55,22 +57,57 @@
             {{ 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></my-upload>
+            <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>
+      <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></template>
+    <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="FlowDialog">
+<script setup name="DelayWarnFlowDialog">
 import useClearDialog from '@/hooks/useClearDialog';
 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';
 const userStore = useUserStore();
 const props = defineProps({
   visible: Boolean,
@@ -79,11 +116,20 @@ const props = defineProps({
 const { curRow } = props;
 const emit = defineEmits(['update:visible', 'success']);
 const formRef = ref(null);
+const asyncDetail = ref({});
+const tableData = ref([]);
+const showHistory = ref(false);
 const getDetail = async () => {
   //编辑状态下获取回显数据的接口请求业务,如果curRow里的字段够用，就直接把curRow里的字段赋值给formData
-  for (let key in formData) {
-    // formData[key] = props.curRow[key];
-  }
+  // 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 { formData, isEdit } = useClearDialog(
   {
@@ -105,10 +151,25 @@ const rules = {
     },
   ],
 };
+const fileChange = (fileList) => {
+  formData.attachmentIds = fileList.map((item) => item.response.id).join(',');
+};
+const columns = [
+  { colKey: 'createTime', title: '跟进时间' },
+  { colKey: 'createName', title: '跟进人' },
+  { colKey: 'remark', title: '跟进说明' },
+  { colKey: 'attachmentIds', title: '附件说明' },
+];
 const flowHandler = () => {
-  //   addUser({ ...formData, id: props.curRow?.id || undefined }).then(() => {
-  //     emit('success');
-  //   });
+  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) => {

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

@@ -41,22 +41,17 @@ import { WARN_TYPE, WARN_FLOW_STATUS } from '@/config/constants';
 import { omit } from 'lodash';
 import { DialogPlugin, MessagePlugin } from 'tdesign-vue-next';
 import FlowDialog from './flow-dialog';
-const showFlowDialog = ref(true);
-const curRow = ref({
-  service: 'aaa',
-  sopNo: 'bbb',
-  customType: 'ccc',
-  custom: 'ddd',
-  warnTime: 1692599171692,
-  userName: '张三',
-  type: 'PLAN',
-  fieldObj: '',
-});
-const editSuccess = () => {};
+const showFlowDialog = ref(false);
+
+const curRow = ref(null);
+const editSuccess = () => {
+  MessagePlugin.success('操作成功');
+  showFlowDialog.value = false;
+};
 const restartHandler = (row) => {
   const confirmDia = DialogPlugin({
     header: '操作提示',
-    body: `确定要重启吗`,
+    body: `您确定要重启当前预警信息吗？`,
     confirmBtn: '确定',
     cancelBtn: '取消',
     onConfirm: () => {
@@ -71,7 +66,7 @@ const restartHandler = (row) => {
 const closeHandler = (row) => {
   const confirmDia = DialogPlugin({
     header: '操作提示',
-    body: `确定要关闭吗`,
+    body: `您确定要关闭当前预警信息吗？`,
     confirmBtn: '确定',
     cancelBtn: '取消',
     onConfirm: () => {
@@ -121,6 +116,8 @@ const columns = [
               hover="color"
               onClick={(e) => {
                 e.stopPropagation();
+                curRow.value = row;
+                showFlowDialog.value = true;
               }}
             >
               跟进
@@ -199,6 +196,9 @@ const fields = ref([
       {
         type: 'button',
         text: '查询',
+        onClick: () => {
+          search();
+        },
       },
     ],
   },
@@ -243,8 +243,6 @@ const { loading, pagination, tableData, onChange, fetchData, search } =
   useFetchTable(getDelayWarnList, {
     params: transParams,
   });
-
-const refresh = async () => {};
 </script>
 
 <style></style>

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

@@ -0,0 +1,191 @@
+<template>
+  <my-dialog
+    :visible="visible"
+    @close="emit('update:visible', false)"
+    :header="`跟进`"
+    :width="1000"
+    :closeOnOverlayClick="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.createTime, 'yyyy-MM-dd hh:mm') }}
+          </t-form-item>
+        </t-col>
+        <t-col :span="3">
+          <t-form-item label="登记人：">
+            {{ asyncDetail.createName }}
+          </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="违规类型：">
+            {{ VIOLATION_TYPE[asyncDetail.type] || asyncDetail.type }}
+          </t-form-item>
+        </t-col>
+        <t-col :span="12">
+          <t-form-item label="违规情况说明：">
+            {{ asyncDetail.content }}
+          </t-form-item>
+        </t-col>
+        <t-col :span="12">
+          <t-form-item label="附件说明：">
+            {{ asyncDetail.attachmentIds }}
+          </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>
+      <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>
+</template>
+<script setup name="ViolationFlowDialog">
+import useClearDialog from '@/hooks/useClearDialog';
+import { ref, computed } from 'vue';
+import { VIOLATION_TYPE, VIOLATION_FLOW_TYPE } from '@/config/constants';
+import { dateFormat } from '@/utils/tool';
+import { useUserStore } from '@/store';
+import { violationDetail, violationDetailList, flowViolation } from '@/api/sop';
+const userStore = useUserStore();
+const props = defineProps({
+  visible: Boolean,
+  curRow: Object,
+});
+const { curRow } = props;
+const emit = defineEmits(['update:visible', 'success']);
+const formRef = ref(null);
+const asyncDetail = ref({});
+const tableData = ref([]);
+const showHistory = ref(false);
+const getDetail = async () => {
+  //编辑状态下获取回显数据的接口请求业务,如果curRow里的字段够用，就直接把curRow里的字段赋值给formData
+  // for (let key in formData) {
+  //   formData[key] = props.curRow[key];
+  // }
+  violationDetail(curRow.id).then((res) => {
+    asyncDetail.value = res;
+  });
+  violationDetailList(curRow.id).then((res) => {
+    tableData.value = res;
+  });
+};
+const { formData, isEdit } = useClearDialog(
+  {
+    attachmentIds: '',
+    remark: '',
+  },
+  props,
+  formRef,
+  getDetail
+);
+
+const rules = {
+  remark: [
+    {
+      required: true,
+      message: '请填写跟进说明',
+      type: 'error',
+      trigger: 'blur',
+    },
+  ],
+};
+const fileChange = (fileList) => {
+  formData.attachmentIds = fileList.map((item) => item.response.id).join(',');
+};
+const columns = [
+  { colKey: 'createTime', title: '跟进时间' },
+  { colKey: 'createName', title: '跟进人' },
+  { colKey: 'remark', title: '跟进说明' },
+  { colKey: 'attachmentIds', title: '附件说明' },
+];
+const flowHandler = () => {
+  flowViolation({
+    ...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();
+    }
+  });
+};
+</script>

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

@@ -1,6 +1,25 @@
 <template>
   <div class="violation-registration flex flex-col h-full">
-    <SearchForm :fields="fields" :params="params"></SearchForm>
+    <SearchForm :fields="fields" :params="params">
+      <template #service="{ item, params }">
+        <select-service-unit
+          v-model="params[item.prop]"
+          clearable
+        ></select-service-unit>
+      </template>
+      <template #user="{ item, params }">
+        <select-filter-user
+          v-model="params[item.prop]"
+          clearable
+        ></select-filter-user>
+      </template>
+      <template #creator="{ item, params }">
+        <select-filter-user
+          v-model="params[item.prop]"
+          clearable
+        ></select-filter-user>
+      </template>
+    </SearchForm>
     <div class="flex-1 page-wrap">
       <t-table
         size="small"
@@ -21,24 +40,75 @@
 </template>
 
 <script setup lang="jsx" name="ViolationRegistration">
-import { reactive, ref } from 'vue';
-import { getTableData } from '@/api/test';
-import useFetchTable from '@/hooks/useFetchTable';
+import { reactive, ref, computed } from 'vue';
+import { getViolationList, closeViolation, restartViolation } from '@/api/sop';
 
-const rowData = ref({});
+import useFetchTable from '@/hooks/useFetchTable';
+import { dictToOptionList } from '@/utils/tool';
+import { VIOLATION_TYPE, VIOLATION_FLOW_STATUS } from '@/config/constants';
+import { omit } from 'lodash';
+import { DialogPlugin, MessagePlugin } from 'tdesign-vue-next';
 
+const showFlowDialog = ref(false);
+const curRow = ref(null);
+const editSuccess = () => {
+  MessagePlugin.success('操作成功');
+  showFlowDialog.value = false;
+};
+const restartHandler = (row) => {
+  const confirmDia = DialogPlugin({
+    header: '操作提示',
+    body: `您确定要重启当前预警信息吗？`,
+    confirmBtn: '确定',
+    cancelBtn: '取消',
+    onConfirm: () => {
+      restartViolation(row.id).then(() => {
+        confirmDia.hide();
+        MessagePlugin.success('操作成功');
+        fetchData();
+      });
+    },
+  });
+};
+const closeHandler = (row) => {
+  const confirmDia = DialogPlugin({
+    header: '操作提示',
+    body: `您确定要关闭当前预警信息吗？`,
+    confirmBtn: '确定',
+    cancelBtn: '取消',
+    onConfirm: () => {
+      closeViolation(row.id).then(() => {
+        confirmDia.hide();
+        MessagePlugin.success('操作成功');
+        fetchData();
+      });
+    },
+  });
+};
 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: '登记人' },
+  // { colKey: 'a', title: '违规流水号' },
+  { colKey: 'sopNo', title: 'SOP流水号' },
+  { colKey: 'userName', title: '节点负责人' },
+  { colKey: 'custom', title: '客户名称' },
+  { colKey: 'crmNo', title: '项目单号' },
+  { colKey: 'crmName', title: '项目名称' },
+  {
+    colKey: 'type',
+    title: '违规类型',
+    cell: (h, { row }) => {
+      return <span>{VIOLATION_TYPE[row.type] || row.type}</span>;
+    },
+  },
+  { colKey: 'content', title: '违规情况' },
+  {
+    colKey: 'status',
+    title: '跟进状态',
+    cell: (h, { row }) => {
+      return <span>{VIOLATION_FLOW_STATUS[row.status] || row.status}</span>;
+    },
+  },
+  { colKey: 'createTime', title: '登记时间' },
+  { colKey: 'createName', title: '登记人' },
   {
     title: '操作',
     colKey: 'operate',
@@ -47,33 +117,42 @@ const columns = [
     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>
+          {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>
       );
     },
@@ -82,32 +161,42 @@ const columns = [
 
 const fields = ref([
   {
-    prop: 'a',
+    prop: 'serviceId',
     label: '服务单元',
     type: 'select',
     labelWidth: 100,
     colSpan: 4.5,
+    cell: 'service',
   },
   {
-    prop: 'b',
+    prop: 'type',
     label: '违规类型',
     type: 'select',
     labelWidth: 100,
+    options: dictToOptionList(VIOLATION_TYPE),
     colSpan: 4.5,
+    attrs: {
+      clearable: true,
+    },
   },
   {
-    prop: 'c',
+    prop: 'status',
     label: '跟进状态',
     type: 'select',
     labelWidth: 100,
+    options: dictToOptionList(VIOLATION_FLOW_STATUS),
     colSpan: 4.5,
+    attrs: {
+      clearable: true,
+    },
   },
   {
-    prop: 'd',
+    prop: 'userId',
     label: '节点负责人',
     type: 'select',
     labelWidth: 100,
     colSpan: 4.5,
+    cell: 'user',
   },
   {
     type: 'buttons',
@@ -116,31 +205,33 @@ const fields = ref([
       {
         type: 'button',
         text: '查询',
+        onClick: () => {
+          search();
+        },
       },
     ],
   },
   {
-    prop: 'e',
+    prop: 'custom',
     label: '客户名称',
-    type: 'select',
     labelWidth: 100,
     colSpan: 4.5,
   },
-
   {
-    prop: 'f',
+    prop: 'sopNo',
     label: 'SOP流水号',
     labelWidth: 100,
     colSpan: 4.5,
   },
   {
-    prop: 'g',
+    prop: 'createId',
     label: '登记人',
     labelWidth: 100,
     colSpan: 4.5,
+    cell: 'creator',
   },
   {
-    prop: 'h',
+    prop: 'time',
     label: '预警时间',
     type: 'daterange',
     labelWidth: 100,
@@ -148,25 +239,26 @@ const fields = ref([
   },
 ]);
 const params = reactive({
-  a: '',
-  b: '',
-  c: '',
-  d: '',
-  e: '',
-  f: '',
-  g: '',
-  h: [],
+  serviceId: '',
+  type: '',
+  status: '',
+  userId: '',
+  custom: '',
+  sopNo: '',
+  createId: '',
+  time: [],
 });
-
-const {
-  loading: tableLoading,
-  pagination,
-  tableData,
-  fetchData,
-  onChange,
-} = useFetchTable(getTableData);
-
-const refresh = async () => {};
+const transParams = computed(() => {
+  return {
+    ...omit(params, 'time'),
+    startTime: params.time[0],
+    endTime: params.time[1],
+  };
+});
+const { loading, pagination, tableData, onChange, fetchData, search } =
+  useFetchTable(getViolationList, {
+    params: transParams,
+  });
 </script>
 
 <style></style>