静态页面

components.d.ts

@@ -16,6 +16,7 @@ declare module 'vue' {
     SearchFormItem: typeof import('./src/components/global/search-form/components/search-form-item.vue')['default']
     TAside: typeof import('tdesign-vue-next')['Aside']
     TButton: typeof import('tdesign-vue-next')['Button']
+    TCheckbox: typeof import('tdesign-vue-next')['Checkbox']
     TCheckboxGroup: typeof import('tdesign-vue-next')['CheckboxGroup']
     TCol: typeof import('tdesign-vue-next')['Col']
     TConfigProvider: typeof import('tdesign-vue-next')['ConfigProvider']

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

@@ -33,14 +33,13 @@
   ></template>
   <!-- 文本框 -->
   <template v-if="item.type == undefined || item.type == 'text'">
-    <t-input v-model="params[item.prop]" placeholder="请输入" v-bind="attrs" />
+    <t-input v-model="params[item.prop]" v-bind="attrs" />
   </template>
   <!-- 下拉选择框 -->
   <template v-if="item.type == 'select' || item.type == 'multipleSelect'">
     <t-select
       v-model="params[item.prop]"
       :multiple="item.type == 'multipleSelect'"
-      placeholder="请选择"
       v-bind="attrs"
     >
       <t-option
@@ -70,7 +69,6 @@
       :mode="item.mode || 'date'"
       value-format="YYYY-MM-DD"
       type="date"
-      :placeholder="item.placeholder || '请选择日期'"
       v-bind="attrs"
     />
   </template>

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

@@ -112,14 +112,14 @@ const fields = [
     {
       prop: 'b',
       label: '姓名',
-      labelWidth: '60px',
+      labelWidth: 60,
       colSpan: 3.6,
     },
     {
       prop: 'c',
       label: '来源',
       type: 'select',
-      labelWidth: '60px',
+      labelWidth: 60,
       colSpan: 3.6,
     },
     {

src/mock/index.js

@@ -216,19 +216,19 @@ export const tableApi = Mock.mock('/api/table', 'post', (data) => {
     // list: [],
     list: [
       {
-        a: 1,
-        b: 2,
+        a: '1',
+        b: '2',
         c: [],
-        d: 4,
-        e: 5,
-        f: 6,
-        g: 7,
-        h: 8,
-        i: 9,
-        j: 10,
-        k: 11,
-        l: 12,
-        m: 13,
+        d: '4',
+        e: '5',
+        f: '6',
+        g: '7',
+        h: '8',
+        i: '9',
+        j: '10',
+        k: [],
+        l: '12',
+        m: '13',
       },
     ],
     total: 80,

src/style/global.less

@@ -37,7 +37,7 @@ body {
   border-radius: 6px;
   background-color: #fff;
   padding: 15px;
-  min-height: 100%;
+  // min-height: 100%;
   overflow: auto;
 }
 .btn-group {

src/views/resource-guard/person-guard/person-allocate/index.vue

@@ -1,7 +1,141 @@
 <template>
-  <div>人员调配</div>
+  <div class="person-allocate 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,
+        }"
+        :selected-row-keys="selectedRowKeys"
+        select-on-row-click
+        @select-change="selectChange"
+      >
+      </t-table>
+    </div>
+  </div>
 </template>
 
-<script setup name="PersonAllocate"></script>
+<script setup lang="jsx" name="PersonAllocate">
+import { reactive, ref } from 'vue';
+import { useRequest } from 'vue-request';
+import { getTableData } from '@/api/test';
+import useFetchTable from '@/hooks/useFetchTable';
+import useTableCrud from '@/hooks/useTableCrud';
+
+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: '项目单号' },
+  { colKey: 'c', title: '客户名称' },
+  { colKey: 'd', title: '客户类型' },
+  { colKey: 'e', title: '省份' },
+  { colKey: 'f', title: '城市' },
+  { colKey: 'g', title: '区县' },
+  { colKey: 'h', title: '服务挡位' },
+  { colKey: 'i', title: '项目角色配置', minWidth: 140 },
+  { colKey: 'j', title: '配额（人）' },
+  { colKey: 'k', title: '已分配（人）' },
+  { colKey: 'l', title: '分配差额（人）' },
+  {
+    title: '操作',
+    colKey: 'operate',
+    fixed: 'right',
+    width: 120,
+    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();
+            }}
+          >
+            发布SOP
+          </t-link>
+        </div>
+      );
+    },
+  },
+];
+const {
+  loading: tableLoading,
+  pagination,
+  tableData,
+  fetchData,
+  onChange,
+} = useFetchTable(getTableData);
+const fields = ref([
+  {
+    prop: 'a',
+    label: '服务单元',
+    type: 'select',
+    labelWidth: 100,
+    colSpan: 4,
+  },
+  {
+    prop: 'b',
+    label: '服务区域',
+    type: 'select',
+    labelWidth: 100,
+    colSpan: 8,
+  },
+  {
+    prop: 'c',
+    label: '客户名称',
+    labelWidth: 100,
+    colSpan: 4,
+  },
+  {
+    prop: 'd',
+    label: '分配差额≤',
+    labelWidth: 100,
+    colSpan: 4,
+  },
+  {
+    type: 'buttons',
+    colSpan: 2,
+    labelWidth: 0,
+    children: [
+      {
+        type: 'button',
+        text: '查询',
+      },
+    ],
+  },
+]);
+const params = reactive({
+  a: '',
+  b: '',
+  c: '',
+  d: '',
+});
+</script>
 
 <style></style>

src/views/resource-guard/person-guard/person-files/add-person-file-dialog.vue

@@ -76,6 +76,40 @@
             <t-select v-model="formData.i"></t-select>
           </t-form-item>
         </t-col>
+        <t-col :span="4">
+          <t-form-item label="入档时间">
+            <t-date-picker v-model="formData.j" />
+          </t-form-item>
+        </t-col>
+        <t-col :span="12">
+          <t-form-item label="认证项目角色">
+            <t-checkbox-group v-model="formData.k">
+              <t-checkbox>实施工程师</t-checkbox>
+              <t-checkbox>区域协调人</t-checkbox>
+              <t-checkbox>助理工程师</t-checkbox>
+            </t-checkbox-group>
+          </t-form-item>
+        </t-col>
+        <t-col :span="4">
+          <t-form-item label="认证时间">
+            <t-date-picker v-model="formData.l" />
+          </t-form-item>
+        </t-col>
+        <t-col :span="4">
+          <t-form-item label="认证成绩">
+            <t-input v-model="formData.m"></t-input>
+          </t-form-item>
+        </t-col>
+        <t-col :span="4">
+          <t-form-item label="认证有效期">
+            <t-date-picker v-model="formData.n" />
+          </t-form-item>
+        </t-col>
+        <t-col :span="12">
+          <t-form-item label="备注">
+            <t-textarea v-model="formData.o" :maxlength="100"></t-textarea>
+          </t-form-item>
+        </t-col>
       </t-row>
     </t-form>
     <template #foot>

src/views/resource-guard/person-guard/person-files/index.vue

@@ -1,12 +1,22 @@
 <template>
-  <div class="person-files flex flex-col">
+  <div class="person-files 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" @click="handleAdd">新增</t-button>
-        <t-button theme="success">批量导入</t-button>
-        <t-button theme="success">批量导出</t-button>
-        <t-button theme="success">作废</t-button>
+        <t-button theme="success" @click="multImport">批量导入</t-button>
+        <t-button
+          theme="success"
+          @click="multExport"
+          :disabled="!selectedRowKeys.length"
+          >批量导出</t-button
+        >
+        <t-button
+          theme="success"
+          @click="cancelIt"
+          :disabled="!selectedRowKeys.length"
+          >作废</t-button
+        >
       </div>
       <t-table
         size="small"
@@ -49,6 +59,9 @@ const selectedRowKeys = ref([]);
 const selectChange = (value, { selectedRowData }) => {
   selectedRowKeys.value = value;
 };
+const multImport = () => {};
+const multExport = () => {};
+const cancelIt = () => {};
 const columns = [
   {
     colKey: 'row-select',
@@ -140,7 +153,7 @@ const {
       h: '',
       i: '',
       j: '',
-      k: '',
+      k: [],
       l: '',
       m: '',
       n: '',
@@ -181,7 +194,7 @@ const fields = ref([
   {
     type: 'buttons',
     colSpan: 2,
-    labelWidth: '0px',
+    labelWidth: 0,
     children: [
       {
         type: 'button',

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

@@ -1,11 +1,14 @@
 <template>
-  <div class="dispatch-manage flex flex-col">
+  <div class="dispatch-manage 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" @click="handleAdd">新增</t-button>
         <t-button theme="success">作废</t-button>
-        <t-button theme="success" @click="multDelineationHandle"
+        <t-button
+          theme="success"
+          :disabled="!selectedRowKeys.length"
+          @click="multDelineationHandle"
           >批量划定</t-button
         >
       </div>
@@ -67,11 +70,7 @@ const selectChange = (value, { selectedRowData }) => {
   selectedRowKeys.value = value;
 };
 const multDelineationHandle = () => {
-  if (!selectedRowKeys.value.length) {
-    //...警告语
-  } else {
-    showMultDelineationDialog.value = true;
-  }
+  showMultDelineationDialog.value = true;
 };
 const rowData = ref({});
 const handleDelineation = (row) => {
@@ -147,28 +146,28 @@ const fields = ref([
     prop: 'a',
     label: '服务单元',
     type: 'select',
-    labelWidth: '80px',
+    labelWidth: 80,
     colSpan: 5,
   },
   {
     prop: 'b',
     label: '大区经理',
     type: 'select',
-    labelWidth: '80px',
+    labelWidth: 80,
     colSpan: 5,
   },
   {
     prop: 'c',
     label: '派单人',
     type: 'select',
-    labelWidth: '80px',
+    labelWidth: 80,
     colSpan: 5,
   },
   {
     prop: 'd',
     label: '客户类型',
     type: 'select',
-    labelWidth: '80px',
+    labelWidth: 80,
     colSpan: 5,
   },
   {
@@ -184,20 +183,20 @@ const fields = ref([
   {
     prop: 'e',
     label: '客户名称',
-    labelWidth: '80px',
+    labelWidth: 80,
     colSpan: 5,
   },
   {
     prop: 'f',
     label: '项目单号',
-    labelWidth: '80px',
+    labelWidth: 80,
     colSpan: 5,
   },
   {
     prop: 'g',
     label: '派单时间',
     type: 'daterange',
-    labelWidth: '80px',
+    labelWidth: 80,
     colSpan: 10,
   },
 ]);

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

@@ -1,10 +1,15 @@
 <template>
-  <div class="add-range flex flex-col">
+  <div class="add-range 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" @click="regionalHandle">批量划定</t-button>
+        <t-button
+          theme="success"
+          :disabled="!selectedRowKeys.length"
+          @click="regionalHandle"
+          >批量划定</t-button
+        >
       </div>
       <t-table
         size="small"
@@ -36,12 +41,7 @@ const selectedRowKeys = ref([]);
 const selectChange = (value, { selectedRowData }) => {
   selectedRowKeys.value = value;
 };
-const regionalHandle = () => {
-  if (!selectedRowKeys.value.length) {
-    //...警告语
-  } else {
-  }
-};
+const regionalHandle = () => {};
 const columns = [
   {
     colKey: 'row-select',
@@ -74,28 +74,28 @@ const fields = ref([
     prop: 'a',
     label: '服务单元',
     type: 'select',
-    labelWidth: '80px',
+    labelWidth: 80,
     colSpan: 5,
   },
   {
     prop: 'b',
     label: '大区经理',
     type: 'select',
-    labelWidth: '80px',
+    labelWidth: 80,
     colSpan: 5,
   },
   {
     prop: 'c',
     label: '派单人',
     type: 'select',
-    labelWidth: '80px',
+    labelWidth: 80,
     colSpan: 5,
   },
   {
     prop: 'd',
     label: '客户类型',
     type: 'select',
-    labelWidth: '80px',
+    labelWidth: 80,
     colSpan: 5,
   },
   {
@@ -111,20 +111,20 @@ const fields = ref([
   {
     prop: 'e',
     label: '客户名称',
-    labelWidth: '80px',
+    labelWidth: 80,
     colSpan: 5,
   },
   {
     prop: 'f',
     label: '项目单号',
-    labelWidth: '80px',
+    labelWidth: 80,
     colSpan: 5,
   },
   {
     prop: 'g',
     label: '派单时间',
     type: 'daterange',
-    labelWidth: '80px',
+    labelWidth: 80,
     colSpan: 10,
   },
 ]);

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="unit-manage flex flex-col">
+  <div class="unit-manage flex flex-col h-full">
     <SearchForm :fields="fields" :params="params"></SearchForm>
     <div class="flex-1 page-wrap">
       <div class="btn-group">
@@ -85,27 +85,27 @@ const fields = ref([
     prop: 'a',
     label: '服务单元名称',
     type: 'select',
-    labelWidth: '100px',
+    labelWidth: 100,
     colSpan: 5,
   },
   {
     prop: 'b',
     label: '区域',
     type: 'select',
-    labelWidth: '100px',
+    labelWidth: 100,
     colSpan: 5,
   },
   {
     prop: 'c',
     label: '客户类型',
     type: 'select',
-    labelWidth: '100px',
+    labelWidth: 100,
     colSpan: 5,
   },
   {
     prop: 'd',
     label: '客户名称',
-    labelWidth: '100px',
+    labelWidth: 100,
     colSpan: 5,
   },
   {

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="unit-manage flex flex-col">
+  <div class="unit-manage flex flex-col h-full">
     <SearchForm :fields="fields" :params="params"></SearchForm>
     <div class="flex-1 page-wrap">
       <div class="btn-group">
@@ -123,21 +123,21 @@ const fields = ref([
     prop: 'a',
     label: '服务单元名称',
     type: 'select',
-    labelWidth: '100px',
+    labelWidth: 100,
     colSpan: 5,
   },
   {
     prop: 'b',
     label: '大区经理',
     type: 'select',
-    labelWidth: '100px',
+    labelWidth: 100,
     colSpan: 5,
   },
   {
     prop: 'c',
     label: '区域',
     type: 'select',
-    labelWidth: '100px',
+    labelWidth: 100,
     colSpan: 5,
   },
   {

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="unit-manage flex flex-col">
+  <div class="unit-manage flex flex-col h-full">
     <SearchForm :fields="fields" :params="params"></SearchForm>
     <div class="flex-1 page-wrap">
       <div class="btn-group">
@@ -134,28 +134,28 @@ const fields = ref([
     prop: 'a',
     label: '业务类型',
     type: 'select',
-    labelWidth: '100px',
+    labelWidth: 100,
     colSpan: 5,
   },
   {
     prop: 'b',
     label: '负责人',
     type: 'select',
-    labelWidth: '100px',
+    labelWidth: 100,
     colSpan: 5,
   },
   {
     prop: 'c',
     label: '当前状态',
     type: 'select',
-    labelWidth: '100px',
+    labelWidth: 100,
     colSpan: 5,
   },
   {
     prop: 'd',
     label: '创建时间',
     type: 'daterange',
-    labelWidth: '100px',
+    labelWidth: 100,
     colSpan: 7,
   },
   {
@@ -171,7 +171,7 @@ const fields = ref([
   {
     prop: 'e',
     label: '服务单元名称',
-    labelWidth: '100px',
+    labelWidth: 100,
     colSpan: 5,
   },
 ]);

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="office-sop flex flex-col">
+  <div class="office-sop flex flex-col h-full">
     <SearchForm :fields="fields" :params="params"></SearchForm>
 
     <div class="flex-1 page-wrap">
@@ -56,20 +56,20 @@ const fields = ref([
     prop: 'a',
     label: '服务单元',
     type: 'select',
-    labelWidth: '100px',
+    labelWidth: 100,
     colSpan: 5,
   },
   {
     prop: 'b',
     label: '出/入库时间',
     type: 'daterange',
-    labelWidth: '100px',
+    labelWidth: 100,
     colSpan: 10,
   },
   {
     prop: 'c',
     label: '客户名称',
-    labelWidth: '100px',
+    labelWidth: 100,
     colSpan: 5,
   },
   {
@@ -80,13 +80,13 @@ const fields = ref([
   {
     prop: 'd',
     label: '设备编号',
-    labelWidth: '100px',
+    labelWidth: 100,
     colSpan: 5,
   },
   {
     prop: 'e',
     label: '发往地',
-    labelWidth: '100px',
+    labelWidth: 100,
     colSpan: 5,
   },
 ]);

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="office-sop flex flex-col">
+  <div class="office-sop flex flex-col h-full">
     <SearchForm :fields="fields" :params="params"></SearchForm>
 
     <div class="flex-1 page-wrap">
@@ -119,7 +119,7 @@ const fields = ref([
     prop: 'a',
     label: '服务单元',
     type: 'select',
-    labelWidth: '80px',
+    labelWidth: 80,
     colSpan: 5,
   },
 ]);

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="office-sop flex flex-col">
+  <div class="office-sop flex flex-col h-full">
     <SearchForm :fields="fields" :params="params"></SearchForm>
 
     <div class="flex-1 page-wrap">
@@ -63,35 +63,35 @@ const fields = ref([
     prop: 'a',
     label: '服务单元',
     type: 'select',
-    labelWidth: '100px',
+    labelWidth: 100,
     colSpan: 4,
   },
   {
     prop: 'b',
     label: '提交人',
     type: 'select',
-    labelWidth: '100px',
+    labelWidth: 100,
     colSpan: 4,
   },
   {
     prop: 'c',
     label: '变更类型',
     type: 'select',
-    labelWidth: '100px',
+    labelWidth: 100,
     colSpan: 4,
   },
   {
     prop: 'd',
     label: '客户类型',
     type: 'select',
-    labelWidth: '100px',
+    labelWidth: 100,
     colSpan: 4,
   },
   {
     prop: 'e',
     label: '流程状态',
     type: 'select',
-    labelWidth: '100px',
+    labelWidth: 100,
     colSpan: 4,
   },
   {
@@ -102,20 +102,20 @@ const fields = ref([
   {
     prop: 'f',
     label: '客户名称',
-    labelWidth: '100px',
+    labelWidth: 100,
     colSpan: 4,
   },
   {
     prop: 'g',
     label: '变更申请编号',
-    labelWidth: '100px',
+    labelWidth: 100,
     colSpan: 4,
   },
   {
     prop: 'h',
     label: '提交时间',
     type: 'daterange',
-    labelWidth: '100px',
+    labelWidth: 100,
     colSpan: 8,
   },
 ]);

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="student-sop flex flex-col">
+  <div class="student-sop flex flex-col h-full">
     <SearchForm :fields="fields" :params="params"></SearchForm>
 
     <div class="flex-1 page-wrap">
@@ -89,7 +89,7 @@ const fields = ref([
     prop: 'a',
     label: '服务单元',
     type: 'select',
-    labelWidth: '80px',
+    labelWidth: 80,
     colSpan: 5,
   },
 ]);

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="delay-warning flex flex-col">
+  <div class="delay-warning flex flex-col h-full">
     <SearchForm :fields="fields" :params="params"></SearchForm>
     <div class="flex-1 page-wrap">
       <t-table
@@ -85,28 +85,28 @@ const fields = ref([
     prop: 'a',
     label: '服务单元',
     type: 'select',
-    labelWidth: '80px',
+    labelWidth: 80,
     colSpan: 5,
   },
   {
     prop: 'b',
     label: '预警类型',
     type: 'select',
-    labelWidth: '80px',
+    labelWidth: 80,
     colSpan: 5,
   },
   {
     prop: 'c',
     label: '跟进状态',
     type: 'select',
-    labelWidth: '80px',
+    labelWidth: 80,
     colSpan: 5,
   },
   {
     prop: 'd',
     label: '客户名称',
     type: 'select',
-    labelWidth: '80px',
+    labelWidth: 80,
     colSpan: 5,
   },
   {
@@ -122,20 +122,20 @@ const fields = ref([
   {
     prop: 'e',
     label: 'SOP流水号',
-    labelWidth: '80px',
+    labelWidth: 80,
     colSpan: 5,
   },
   {
     prop: 'f',
     label: '预警时间',
     type: 'daterange',
-    labelWidth: '80px',
+    labelWidth: 80,
     colSpan: 10,
   },
   {
     prop: 'g',
     label: '预警字段',
-    labelWidth: '80px',
+    labelWidth: 80,
     colSpan: 5,
   },
 ]);

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="violation-registration flex flex-col">
+  <div class="violation-registration flex flex-col h-full">
     <SearchForm :fields="fields" :params="params"></SearchForm>
     <div class="flex-1 page-wrap">
       <t-table
@@ -85,28 +85,28 @@ const fields = ref([
     prop: 'a',
     label: '服务单元',
     type: 'select',
-    labelWidth: '100px',
+    labelWidth: 100,
     colSpan: 4.5,
   },
   {
     prop: 'b',
     label: '违规类型',
     type: 'select',
-    labelWidth: '100px',
+    labelWidth: 100,
     colSpan: 4.5,
   },
   {
     prop: 'c',
     label: '跟进状态',
     type: 'select',
-    labelWidth: '100px',
+    labelWidth: 100,
     colSpan: 4.5,
   },
   {
     prop: 'd',
     label: '节点负责人',
     type: 'select',
-    labelWidth: '100px',
+    labelWidth: 100,
     colSpan: 4.5,
   },
   {
@@ -123,27 +123,27 @@ const fields = ref([
     prop: 'e',
     label: '客户名称',
     type: 'select',
-    labelWidth: '100px',
+    labelWidth: 100,
     colSpan: 4.5,
   },
 
   {
     prop: 'f',
     label: 'SOP流水号',
-    labelWidth: '100px',
+    labelWidth: 100,
     colSpan: 4.5,
   },
   {
     prop: 'g',
     label: '登记人',
-    labelWidth: '100px',
+    labelWidth: 100,
     colSpan: 4.5,
   },
   {
     prop: 'h',
     label: '预警时间',
     type: 'daterange',
-    labelWidth: '100px',
+    labelWidth: 100,
     colSpan: 9,
   },
 ]);