feat: 完成add vgm页面样式

.prettierrc.json

@@ -5,4 +5,4 @@
   "singleQuote": true,
   "printWidth": 100,
   "trailingComma": "none"
-}
+}

src/api/module/common.ts

@@ -25,6 +25,23 @@ export const saveTableSettingColumns = (params: any, config: any) => {
     config
   )
 }
+
+/**
+ * 修改密码
+ */
+export const changePwdByLogin = (params: any, config: any) => {
+  return HttpAxios.post(
+    `${baseUrl}`,
+    {
+      action: 'ajax',
+      operate: 'save_setting_display',
+      model_name: 'Booking_Search',
+      ...params
+    },
+    config
+  )
+}
+
 /**
  * 获取日志列
  */
@@ -32,7 +49,7 @@ export const getOperationTableColumns = (params: any, config: any) => {
   return HttpAxios.get(
     `${baseUrl}`,
     {
-      action: 'opreation_log',
+      action: 'opreation_log'
     },
     config
   )
@@ -173,4 +190,3 @@ export const SaveLayout = (params: any, config: any) => {
     config
   )
 }
-

src/views/Tracking/src/components/TrackingTable/src/components/VGMView.vue

@@ -1,19 +1,82 @@
 <script setup lang="ts">
+import dayjs from 'dayjs'
+
+import { type VxeGridInstance, type VxeGridProps } from 'vxe-table'
+
 const formInline = ref({
   user: '',
   region: '',
   date: ''
 })
-const onSubmit = () => {
-  console.log('submit!')
-}
 
-const rules = reactive({
-  user: [
-    { required: true, message: 'Please input Activity name', trigger: 'blur' },
+// 使用类型断言
+// const rules = reactive({
+//   user: [{ required: true, message: 'Please input Activity name', trigger: 'blur' }]
+// })
+
+const tableData = ref<VxeGridProps<any>>({
+  minHeight: 70,
+  border: true,
+  round: true,
+  columns: [
+    {
+      title: 'Container No.',
+      field: 'container_no',
+      width: 150
+    },
+    {
+      title: 'VGM Weight',
+      field: 'vgm_weight',
+      width: 150,
+      editRender: {
+        name: 'vInput'
+      },
+      slots: {
+        edit: 'vInput'
+      }
+    },
+    {
+      title: 'VGM Unit',
+      field: 'vgm_unit',
+      width: 150,
+      editRender: {
+        name: 'vSelect'
+      },
+      slots: {
+        edit: 'vSelect'
+      }
+    },
+    {
+      title: 'VGM Date',
+      field: 'vgm_date',
+      width: 150,
+      editRender: {
+        name: 'editDate'
+      },
+      slots: {
+        edit: 'editDate'
+      }
+    }
   ],
+  data: [{}],
+  scrollY: { enabled: true, oSize: 20, gt: 30 },
+  stripe: true,
+  emptyText: ' ',
+  showHeaderOverflow: true,
+  showOverflow: true,
+  headerRowStyle: {
+    backgroundColor: 'var(--color-table-header-bg)'
+  },
+  editConfig: {
+    enabled: true,
+    trigger: 'dblclick', // 触发编辑的方式，可以是 click 或者 dbclick
+    mode: 'row',
+    showIcon: true
+  },
+  columnConfig: { resizable: true, useKey: true },
+  rowConfig: { isHover: true }
 })
-
+const tableRef = ref<VxeGridInstance | null>(null)
 </script>
 
 <template>
@@ -58,32 +121,38 @@ const rules = reactive({
           </div>
         </div>
         <div class="form">
-         <div class="form-row">
+          <div class="form-row">
             <div class="form-item">
-              <div class="label">
-                Submitter <span class="require-asterisk">*</span>
-              </div>
+              <div class="label">Submitter <span class="require-asterisk">*</span></div>
               <div class="content">
-                <el-input v-model="formInline.user" placeholder="Please enter..." clearable></el-input>
+                <el-input
+                  v-model="formInline.user"
+                  placeholder="Please enter..."
+                  clearable
+                ></el-input>
               </div>
             </div>
             <div class="form-item">
-              <div class="label">
-                Signature <span class="require-asterisk">*</span>
-              </div>
+              <div class="label">Signature <span class="require-asterisk">*</span></div>
               <div class="content">
-                <el-input v-model="formInline.user" placeholder="Please enter..." clearable></el-input>
+                <el-input
+                  v-model="formInline.region"
+                  placeholder="Please enter..."
+                  clearable
+                ></el-input>
               </div>
             </div>
-            <div style="width: 130px;"></div>
-         </div>
-         <div class="form-row">
+            <div style="width: 130px"></div>
+          </div>
+          <div class="form-row">
             <div class="form-item">
-              <div class="label">
-                Authorized Email <span class="require-asterisk">*</span>
-              </div>
+              <div class="label">Authorized Email <span class="require-asterisk">*</span></div>
               <div class="content">
-                <el-input v-model="formInline.user" placeholder="Please enter..." clearable></el-input>
+                <el-input
+                  v-model="formInline.user"
+                  placeholder="Please enter..."
+                  clearable
+                ></el-input>
               </div>
             </div>
             <div class="form-item">
@@ -92,22 +161,65 @@ const rules = reactive({
                 <span class="require-asterisk">*</span>
               </div>
               <div class="content">
-                <el-input v-model="formInline.user" placeholder="Please enter..." clearable></el-input>
+                <el-input
+                  v-model="formInline.user"
+                  placeholder="Please enter..."
+                  clearable
+                ></el-input>
               </div>
             </div>
-            <div class="form-item" style="flex: 0 0 130px;">
-             <div class="label"> </div>
+            <div class="form-item" style="flex: 0 0 130px">
+              <div class="label"></div>
               <div class="content">
                 <el-checkbox v-model="formInline.user" label="Option 1" size="large" />
               </div>
             </div>
-         </div>
+          </div>
         </div>
       </div>
-      <div class="detail-info" style="margin-top: 8px;">
+      <div class="detail-info" style="margin-top: 8px">
         <div class="title">
           <span>Detail Information</span>
         </div>
+        <div class="table">
+          <vxe-grid ref="tableRef" v-bind="tableData">
+            <template #vInput="{ row, column }">
+              <el-input
+                v-model="row[column.field]"
+                placeholder="Please enter..."
+                clearable
+              ></el-input>
+            </template>
+
+            <template #vSelect="{ row, column }">
+              <vxe-select v-model="row[column.field]" placeholder="Please select..." clearable>
+                <vxe-option label="KGS" value="KGS"></vxe-option>
+                <vxe-option label="LBS" value="LBS"></vxe-option>
+              </vxe-select>
+            </template>
+
+            <template #editDate="{ row, column }">
+              <!-- <el-date-picker
+                v-model="row[column.field]"
+                type="datetime"
+                style="width: 100%"
+                placeholder="Pick a Date"
+                date-format="MM/DD/YYYY"
+                value-format="YYYY-MM-DD HH:mm:ss"
+                format="MM/YYYY/DD HH:mm:ss"
+              /> -->
+              <a-date-picker
+                :showNow="false"
+                class="test-date-picker"
+                placement="topLeft"
+                v-model:value="row[column.field]"
+                format="YYYY-MM-DD HH:mm:ss"
+                :getPopupContainer="(target) => target.parentElement"
+                :show-time="{ defaultValue: dayjs('00:00:00', 'HH:mm:ss') }"
+              />
+            </template>
+          </vxe-grid>
+        </div>
       </div>
     </div>
   </div>
@@ -176,10 +288,10 @@ const rules = reactive({
           font-size: 12px;
           line-height: 16px;
           color: var(--dashboard-text-color);
-          .require-asterisk  {
+          .require-asterisk {
             margin-left: -3px;
             font-size: 16px;
-            color: #C9353F;
+            color: #c9353f;
           }
         }
         .content {
@@ -211,3 +323,20 @@ const rules = reactive({
   }
 }
 </style>
+<style lang="scss">
+.el-checkbox__input.is-checked + .el-checkbox__label {
+  color: var(--color-neutral-1);
+}
+.test-date-picker {
+  .ant-picker-dropdown {
+    // top: 40px !important;
+  }
+  .anticon svg {
+    color: #202020;
+  }
+}
+.vxe-grid .vxe-grid--table-wrapper,
+div.vxe-table--body-wrapper {
+  overflow: visible;
+}
+</style>

tsconfig.app.json

@@ -12,8 +12,8 @@
   ],
   "compilerOptions": {
     "outDir": "./dist/app",
-    "rootDir": "./src/app",
-    "module": "esnext",
+    "module": "nodenext",
+    "moduleResolution": "nodenext",
     "composite": true,
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
     "baseUrl": ".",

tsconfig.json

@@ -1,10 +1,10 @@
 {
   "compilerOptions": {
     "target": "esnext",
-    "module": "esnext",
+    "module": "node16",
     "noImplicitAny": false,
     "useDefineForClassFields": true,
-    "moduleResolution": "node",
+    "moduleResolution": "nodenext",
     "strict": true,
     "jsx": "preserve",
     "sourceMap": true,
@@ -22,7 +22,13 @@
       "esnext",
       "dom",
       "ES6"
-    ]
+    ],
+    "baseUrl": ".",
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    }
   },
   "include": [
     "packages",

tsconfig.node.json

@@ -12,7 +12,6 @@
     "noEmit": true,
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
     "outDir": "./dist/node",
-    "rootDir": "./src/node",
     "module": "node16",
     "types": [
       "node"