静态页面

src/components/global/search-form/index.vue

@@ -1,6 +1,6 @@
 //该组件适用于表格的查询条件等不太复杂的表单场景,通过透传props配置来驱动表单的渲染。
 //该组件具备栅格功能,既可以配置model,也可以配置宽度
-//其他较复杂的主页面表单场景还是简易手写组件和业务（便于可读性和维护）
+//其他较复杂的主页面表单场景还是简易手写组件和业务
 <template>
   <div
     v-if="fields?.length"
@@ -44,11 +44,7 @@
         </div>
         <!-- </div> -->
       </div>
-      <div
-        ref="otherRows"
-        class="other-rows flex"
-        :style="{ height: otherHeight }"
-      >
+      <div ref="otherRows" class="other-rows" :style="{ height: otherHeight }">
         <t-form-item
           v-for="item in otherLineItems"
           :key="item.prop"
@@ -168,6 +164,16 @@ const fields = [
   },
 ];
 */
+if (props.showAll) {
+  //假设配置为不显示展开按钮，则要考虑把"查询"按钮排到末尾端
+  let buttonsFieldIndex = props.fields.findIndex(
+    (item) => item.type === 'buttons'
+  );
+  if (buttonsFieldIndex > -1) {
+    let buttonsFieldArr = props.fields.splice(buttonsFieldIndex, 1);
+    props.fields.push(buttonsFieldArr[0]);
+  }
+}
 const showExpandBtn = computed(() => {
   let allColSpanNum = props.fields.reduce((total, item) => {
     return total + item.colSpan;
@@ -248,6 +254,8 @@ const colToWidth = (colSpan) => {
     height: 0;
     overflow: hidden;
     transition: all 0.2s;
+    flex-wrap: wrap;
+    display: flex;
   }
   // :deep(
   //     .other-rows

src/mock/index.js

@@ -185,6 +185,46 @@ const menusList = [
     sort: 2,
     name: 'DeviceMonitor',
   },
+  {
+    id: 25,
+    title: '工时管理',
+    parentId: 0,
+    url: '/work-hours',
+    sort: 3,
+    name: 'WorkHours',
+  },
+  {
+    id: 26,
+    title: '工时管理',
+    parentId: 25,
+    url: '/work-hours/work-hours-manage',
+    sort: 1,
+    name: 'WorkHoursManage',
+  },
+  {
+    id: 27,
+    title: '异常审核',
+    parentId: 26,
+    url: '/work-hours/work-hours-manage/abnormal-check',
+    sort: 1,
+    name: 'AbnormalCheck',
+  },
+  {
+    id: 28,
+    title: '考勤提交',
+    parentId: 26,
+    url: '/work-hours/work-hours-manage/work-attendance',
+    sort: 2,
+    name: 'WorkAttendance',
+  },
+  {
+    id: 29,
+    title: '工时统计',
+    parentId: 26,
+    url: '/work-hours/work-hours-manage/work-statistics',
+    sort: 3,
+    name: 'WorkStatistics',
+  },
 ];
 
 export const menusApi = Mock.mock('/api/getMenus', 'get', () => {

src/router/asyncRoutes.js

@@ -2,8 +2,9 @@ import myWorkbenches from './modules/myWorkbenches';
 import serviceUnit from './modules/serviceUnit';
 import sop from './modules/sop';
 import resourceGuard from './modules/resourceGuard';
+import workHours from './modules/workHours';
 
-const asyncRoutes = [myWorkbenches, serviceUnit, sop, resourceGuard];
+const asyncRoutes = [myWorkbenches, serviceUnit, sop, resourceGuard, workHours];
 export const moduleMap = asyncRoutes.reduce((obj, item) => {
   obj[item.path.slice(1)] = item.name;
   return obj;

src/router/modules/workHours.js

@@ -0,0 +1,60 @@
+export default {
+  name: 'WorkHours',
+  path: '/work-hours',
+  redirect: '/work-hours/work-hours-manage',
+  meta: {
+    title: '工时管理',
+    sort: 4,
+    isModule: true,
+  },
+  children: [
+    {
+      name: 'WorkHoursManage',
+      path: '/work-hours/work-hours-manage',
+      redirect: '/work-hours/work-hours-manage/abnormal-check',
+      meta: {
+        title: '工时管理',
+        sort: 1,
+        icon: 'layers',
+      },
+      children: [
+        {
+          name: 'AbnormalCheck',
+          path: '/work-hours/work-hours-manage/abnormal-check',
+          component: () =>
+            import(
+              '@/views/work-hours/work-hours-manage/abnormal-check/index.vue'
+            ),
+          meta: {
+            title: '异常审核',
+            sort: 1,
+          },
+        },
+        {
+          name: 'WorkAttendance',
+          path: '/work-hours/work-hours-manage/work-attendance',
+          component: () =>
+            import(
+              '@/views/work-hours/work-hours-manage/work-attendance/index.vue'
+            ),
+          meta: {
+            title: '考勤提交',
+            sort: 2,
+          },
+        },
+        {
+          name: 'WorkStatistics',
+          path: '/work-hours/work-hours-manage/work-statistics',
+          component: () =>
+            import(
+              '@/views/work-hours/work-hours-manage/work-statistics/index.vue'
+            ),
+          meta: {
+            title: '工时统计',
+            sort: 3,
+          },
+        },
+      ],
+    },
+  ],
+};

src/style/global.less

@@ -62,6 +62,8 @@ body {
   width: 100%;
 }
 .my-form-item {
+  padding-right: 15px;
+  padding-left: 15px;
   .t-form__controls-content {
     flex-direction: column;
     align-items: flex-start;

src/style/tdesign-reset.less

@@ -38,3 +38,12 @@
   width: 100%;
   margin-right: 0;
 }
+.t-tabs {
+  border: 1px solid #dcdfe6;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
+  .t-tabs__content {
+    .t-tab-panel {
+      padding: 15px;
+    }
+  }
+}

src/views/service-unit/service-unit-manage/unit-manage/index.vue

@@ -41,15 +41,15 @@ import AddUnitDialog from './add-unit-dialog.vue';
 const formDialogRef = ref(null);
 
 const columns = [
-  { colKey: 'a', title: '服务单元名称', width: 140 },
-  { colKey: 'b', title: '服务开始时间', width: 140 },
-  { colKey: 'c', title: '服务截止时间', width: 140 },
-  { colKey: 'd', title: '业务类型', minWidth: 100 },
-  { colKey: 'e', title: '负责人', width: 80 },
-  { colKey: 'f', title: '区域配比', width: 80 },
-  { colKey: 'g', title: '当前状态', width: 80 },
-  { colKey: 'h', title: '创建人', width: 80 },
-  { colKey: 'i', title: '创建时间', width: 140 },
+  { colKey: 'a', title: '服务单元名称' },
+  { colKey: 'b', title: '服务开始时间' },
+  { colKey: 'c', title: '服务截止时间' },
+  { colKey: 'd', title: '业务类型' },
+  { colKey: 'e', title: '负责人' },
+  { colKey: 'f', title: '区域配比' },
+  { colKey: 'g', title: '当前状态' },
+  { colKey: 'h', title: '创建人' },
+  { colKey: 'i', title: '创建时间' },
   {
     title: '操作',
     colKey: 'operate',

src/views/sop/sop-manage/device-out-in/index.vue

@@ -5,7 +5,9 @@
     <div class="flex-1 page-wrap">
       <div class="btn-group">
         <t-button theme="success">新增</t-button>
-        <t-button theme="success">作废</t-button>
+        <t-button theme="success" :disabled="!selectedRowKeys.length"
+          >作废</t-button
+        >
       </div>
       <t-table
         size="small"

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

@@ -4,7 +4,9 @@
 
     <div class="flex-1 page-wrap">
       <div class="btn-group">
-        <t-button theme="success">批量作废</t-button>
+        <t-button theme="success" :disabled="!selectedRowKeys.length"
+          >批量作废</t-button
+        >
       </div>
       <t-table
         size="small"

src/views/sop/sop-manage/project-change-report/index.vue

@@ -4,7 +4,9 @@
 
     <div class="flex-1 page-wrap">
       <div class="btn-group">
-        <t-button theme="success">作废</t-button>
+        <t-button theme="success" :disabled="!selectedRowKeys.length"
+          >作废</t-button
+        >
       </div>
       <t-table
         size="small"

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

@@ -9,7 +9,7 @@
         </t-row>
       </t-form>
       <p class="split-line"></p>
-      <t-tabs v-model="curStep" theme="normal" class="m-t-20px">
+      <t-tabs v-model="curStep" theme="card" class="m-t-20px">
         <t-tab-panel
           v-for="item in tabs"
           :key="item.taskKey"

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

@@ -4,8 +4,9 @@
 
     <div class="flex-1 page-wrap">
       <div class="btn-group">
-        <t-button theme="success">批量作废</t-button>
-        <t-button theme="success">项目计划变更</t-button>
+        <t-button theme="success" :disabled="!selectedRowKeys.length"
+          >批量作废</t-button
+        >
       </div>
       <t-table
         size="small"

src/views/work-hours/work-hours-manage/abnormal-check/done-check.vue

@@ -0,0 +1,123 @@
+<template>
+  <div class="wait-check">
+    <SearchForm :fields="fields" :params="params" showAll></SearchForm>
+    <t-table
+      size="small"
+      row-key="id"
+      :columns="columns"
+      :data="tableData"
+      bordered
+      :pagination="{
+        defaultCurrent: 1,
+        defaultPageSize: 10,
+        onChange,
+        total: pagination.total,
+      }"
+    >
+    </t-table>
+  </div>
+</template>
+
+<script setup lang="jsx" name="DoneCheck">
+import { reactive, ref } from 'vue';
+import { useRequest } from 'vue-request';
+import { getTableData } from '@/api/test';
+import useFetchTable from '@/hooks/useFetchTable';
+
+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: 'l', title: '申请时间' },
+  { colKey: 'm', title: '审核状态' },
+  { colKey: 'n', title: '审核结果' },
+  { colKey: 'o', title: '审核人' },
+  { colKey: 'p', title: '审核时间' },
+];
+const {
+  loading: tableLoading,
+  pagination,
+  tableData,
+  fetchData,
+  onChange,
+} = useFetchTable(getTableData);
+const fields = ref([
+  {
+    prop: 'a',
+    label: '服务单元',
+    type: 'select',
+    labelWidth: 100,
+    colSpan: 5,
+  },
+  {
+    prop: 'b',
+    label: '姓名',
+    labelWidth: 100,
+    colSpan: 5,
+  },
+  {
+    prop: 'c',
+    label: '所属供应商',
+    type: 'select',
+    labelWidth: 100,
+    colSpan: 5,
+  },
+  {
+    prop: 'd',
+    label: '审核结果',
+    type: 'select',
+    labelWidth: 100,
+    colSpan: 5,
+  },
+  {
+    prop: 'e',
+    label: '客户名称',
+    labelWidth: 100,
+    colSpan: 4,
+  },
+
+  {
+    prop: 'f',
+    label: '异常时间',
+    type: 'daterange',
+    labelWidth: 100,
+    colSpan: 10,
+  },
+  {
+    prop: 'g',
+    label: '申请时间',
+    type: 'daterange',
+    labelWidth: 100,
+    colSpan: 10,
+  },
+  {
+    type: 'buttons',
+    colSpan: 3,
+    children: [
+      {
+        type: 'button',
+        text: '查询',
+      },
+    ],
+  },
+]);
+const params = reactive({
+  a: '',
+  b: '',
+  c: '',
+  d: '',
+  e: '',
+  f: [],
+  g: [],
+});
+</script>
+
+<style lang="less" scoped></style>

src/views/work-hours/work-hours-manage/abnormal-check/index.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="abnormal-check h-full overflow-auto">
+    <t-tabs v-model="curTab" theme="card">
+      <t-tab-panel value="1">
+        <template #label>待审核</template>
+        <WaitCheck></WaitCheck>
+      </t-tab-panel>
+      <t-tab-panel value="2">
+        <template #label>已审核</template>
+        <DoneCheck></DoneCheck>
+      </t-tab-panel>
+    </t-tabs>
+  </div>
+</template>
+
+<script setup name="AbnormalCheck">
+import { ref } from 'vue';
+import WaitCheck from './wait-check';
+import DoneCheck from './done-check';
+const curTab = ref('1');
+</script>
+
+<style lang="less" scoped>
+.abnormal-check {
+  padding: 15px;
+}
+</style>

src/views/work-hours/work-hours-manage/abnormal-check/wait-check.vue

@@ -0,0 +1,164 @@
+<template>
+  <div class="wait-check">
+    <SearchForm :fields="fields" :params="params" showAll></SearchForm>
+    <div class="btn-group">
+      <t-button theme="success" :disabled="!selectedRowKeys.length"
+        >批量通过</t-button
+      >
+      <t-button theme="success" :disabled="!selectedRowKeys.length"
+        >批量拒绝</t-button
+      >
+    </div>
+    <t-table
+      size="small"
+      row-key="id"
+      :columns="columns"
+      :data="tableData"
+      bordered
+      :pagination="{
+        defaultCurrent: 1,
+        defaultPageSize: 10,
+        onChange,
+        total: pagination.total,
+      }"
+      :selected-row-keys="selectedRowKeys"
+      select-on-row-click
+      @select-change="selectChange"
+    >
+    </t-table>
+  </div>
+</template>
+
+<script setup lang="jsx" name="WaitCheck">
+import { reactive, ref } from 'vue';
+import { useRequest } from 'vue-request';
+import { getTableData } from '@/api/test';
+import useFetchTable from '@/hooks/useFetchTable';
+
+const selectedRowKeys = ref([]);
+const selectChange = (value, { selectedRowData }) => {
+  selectedRowKeys.value = value;
+};
+
+const columns = [
+  {
+    colKey: 'row-select',
+    type: 'multiple',
+    width: 50,
+    fixed: 'left',
+  },
+  { 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: 'l', title: '审核状态' },
+  { colKey: 'm', title: '当前审核人' },
+  { colKey: 'n', title: '申请时间' },
+  {
+    title: '操作',
+    colKey: 'operate',
+    fixed: 'right',
+    width: 140,
+    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>
+        </div>
+      );
+    },
+  },
+];
+const {
+  loading: tableLoading,
+  pagination,
+  tableData,
+  fetchData,
+  onChange,
+} = useFetchTable(getTableData);
+const fields = ref([
+  {
+    prop: 'a',
+    label: '服务单元',
+    type: 'select',
+    labelWidth: 100,
+    colSpan: 5,
+  },
+  {
+    prop: 'b',
+    label: '姓名',
+    labelWidth: 100,
+    colSpan: 5,
+  },
+  {
+    prop: 'c',
+    label: '所属供应商',
+    type: 'select',
+    labelWidth: 100,
+    colSpan: 5,
+  },
+  {
+    prop: 'd',
+    label: '客户名称',
+    labelWidth: 100,
+    colSpan: 5,
+  },
+  {
+    type: 'buttons',
+    colSpan: 3,
+    children: [
+      {
+        type: 'button',
+        text: '查询',
+      },
+    ],
+  },
+  {
+    prop: 'e',
+    label: '异常时间',
+    type: 'daterange',
+    labelWidth: 100,
+    colSpan: 10,
+  },
+  {
+    prop: 'f',
+    label: '申请时间',
+    type: 'daterange',
+    labelWidth: 100,
+    colSpan: 10,
+  },
+]);
+const params = reactive({
+  a: '',
+  b: '',
+  c: '',
+  d: '',
+  e: [],
+  f: [],
+});
+</script>
+
+<style lang="less" scoped></style>

src/views/work-hours/work-hours-manage/work-attendance/index.vue

@@ -0,0 +1,179 @@
+<template>
+  <div class="work-attendance flex flex-col h-full">
+    <SearchForm :fields="fields" :params="params"></SearchForm>
+
+    <div class="flex-1 page-wrap">
+      <div class="btn-group">
+        <t-button
+          theme="success"
+          :disabled="!selectedRowKeys.length"
+          @click="multSubmit"
+          >批量提交</t-button
+        >
+      </div>
+      <t-table
+        size="small"
+        row-key="id"
+        :columns="columns"
+        :data="tableData"
+        bordered
+        :pagination="{
+          defaultCurrent: 1,
+          defaultPageSize: 10,
+          onChange,
+          total: pagination.total,
+        }"
+        :selected-row-keys="selectedRowKeys"
+        select-on-row-click
+        @select-change="selectChange"
+      >
+      </t-table>
+    </div>
+  </div>
+</template>
+
+<script setup name="WorkAttendance">
+import { reactive, ref } from 'vue';
+import { getTableData } from '@/api/test';
+import useFetchTable from '@/hooks/useFetchTable';
+
+const selectedRowKeys = ref([]);
+const selectChange = (value, { selectedRowData }) => {
+  selectedRowKeys.value = value;
+};
+const multSubmit = () => {};
+const columns = [
+  {
+    colKey: 'row-select',
+    type: 'multiple',
+    width: 50,
+    fixed: 'left',
+  },
+  { 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: 'l', title: '工作日（天）' },
+  { colKey: 'm', title: '周末（天）' },
+  { colKey: 'n', title: '法定节假日（天）' },
+  { colKey: 'o', title: '累计工时（天）' },
+  { colKey: 'p', title: '违规工时（天）' },
+  { colKey: 'q', title: '考勤异常数（天）' },
+  { colKey: 'r', title: '剩余补卡次数' },
+  { colKey: 's', title: '待处理异常数' },
+  { colKey: 't', title: '提交状态' },
+  { colKey: 'u', title: '提交人' },
+  { colKey: 'v', title: '提交时间' },
+];
+const {
+  loading: tableLoading,
+  pagination,
+  tableData,
+  fetchData,
+  onChange,
+} = useFetchTable(getTableData);
+const fields = ref([
+  {
+    prop: 'a',
+    label: '服务单元',
+    type: 'select',
+    labelWidth: 120,
+    colSpan: 5.4,
+  },
+  {
+    prop: 'b',
+    label: '提交状态',
+    type: 'select',
+    labelWidth: 120,
+    colSpan: 5.4,
+  },
+  {
+    prop: 'c',
+    label: '提交人',
+    type: 'select',
+    labelWidth: 120,
+    colSpan: 5.4,
+  },
+  {
+    prop: 'd',
+    label: '姓名',
+    labelWidth: 120,
+    colSpan: 5.4,
+  },
+  {
+    type: 'buttons',
+    colSpan: 2,
+    children: [
+      {
+        type: 'button',
+        text: '查询',
+      },
+    ],
+  },
+  {
+    prop: 'e',
+    label: '所属供应商',
+    type: 'select',
+    labelWidth: 120,
+    colSpan: 5.4,
+  },
+  {
+    prop: 'f',
+    label: '客户名称',
+    labelWidth: 120,
+    colSpan: 5.4,
+  },
+  {
+    prop: 'g',
+    label: 'SOP流水号',
+    labelWidth: 120,
+    colSpan: 5.4,
+  },
+  {
+    prop: 'h',
+    label: '违规工时>',
+    labelWidth: 120,
+    colSpan: 5.4,
+  },
+  {
+    prop: 'i',
+    label: '考勤异常数>',
+    labelWidth: 120,
+    colSpan: 5.4,
+  },
+  {
+    prop: 'j',
+    label: '剩余补卡次数>',
+    labelWidth: 120,
+    colSpan: 5.4,
+  },
+  {
+    prop: 'k',
+    label: '待处理异常数>',
+    labelWidth: 120,
+    colSpan: 5.4,
+  },
+]);
+const params = reactive({
+  a: '',
+  b: '',
+  c: '',
+  d: '',
+  e: '',
+  f: '',
+  g: '',
+  h: '',
+  i: '',
+  j: '',
+  k: '',
+});
+</script>
+
+<style></style>

src/views/work-hours/work-hours-manage/work-statistics/index.vue

@@ -0,0 +1,147 @@
+<template>
+  <div class="work-statistics flex flex-col h-full">
+    <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="WorkStatistics">
+import { ref, reactive } from 'vue';
+import { getTableData } from '@/api/test';
+import useFetchTable from '@/hooks/useFetchTable';
+import useTableCrud from '@/hooks/useTableCrud';
+
+const columns = [
+  { colKey: 'a', title: '服务单元名称' },
+  { colKey: 'b', title: '服务开始时间' },
+  { colKey: 'c', title: '服务截止时间' },
+  { colKey: 'd', title: '业务类型' },
+  { colKey: 'e', title: '负责人' },
+  { colKey: 'f', title: '区域配比' },
+  { colKey: 'g', title: '当前状态' },
+  { colKey: 'h', title: '创建人' },
+  { colKey: 'i', title: '创建时间' },
+  {
+    title: '操作',
+    colKey: 'operate',
+    fixed: 'right',
+    width: 260,
+    cell: (h, { row }) => {
+      return (
+        <div class="table-operations">
+          <t-link
+            theme="primary"
+            hover="color"
+            onClick={(e) => {
+              e.stopPropagation();
+            }}
+          >
+            同意撤回
+          </t-link>
+        </div>
+      );
+    },
+  },
+];
+const {
+  loading: tableLoading,
+  pagination,
+  tableData,
+  fetchData,
+  onChange,
+} = useFetchTable(getTableData);
+
+const refresh = async () => {};
+
+const fields = ref([
+  {
+    prop: 'a',
+    label: '服务单元',
+    type: 'select',
+    labelWidth: 100,
+    colSpan: 5,
+  },
+  {
+    prop: 'b',
+    label: '提交状态',
+    type: 'select',
+    labelWidth: 100,
+    colSpan: 5,
+  },
+  {
+    prop: 'c',
+    label: '提交人',
+    type: 'select',
+    labelWidth: 100,
+    colSpan: 5,
+  },
+  {
+    prop: 'd',
+    label: '姓名',
+    labelWidth: 100,
+    colSpan: 5,
+  },
+  {
+    type: 'buttons',
+    colSpan: 3,
+    children: [
+      {
+        type: 'button',
+        text: '查询',
+      },
+    ],
+  },
+  {
+    prop: 'e',
+    label: '所属供应商',
+    type: 'select',
+    labelWidth: 100,
+    colSpan: 5,
+  },
+  {
+    prop: 'f',
+    label: '客户名称',
+    labelWidth: 100,
+    colSpan: 5,
+  },
+  {
+    prop: 'g',
+    label: 'SOP流水号',
+    labelWidth: 100,
+    colSpan: 5,
+  },
+  {
+    prop: 'h',
+    label: '违规工时>',
+    labelWidth: 100,
+    colSpan: 5,
+  },
+]);
+const params = reactive({
+  a: '',
+  b: '',
+  c: '',
+  d: '',
+  e: '',
+  f: '',
+  g: '',
+  h: '',
+});
+</script>
+
+<style></style>