feat: 实现VGM中 default setting的功能

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

@@ -0,0 +1,180 @@
+<script setup lang="ts">
+const openDialog = () => {
+  dialogVisible.value = true
+}
+
+const dialogVisible = ref(true)
+const formData = ref({
+  Submitter: '',
+  signature: '',
+  authorized_email: '',
+  authorized_tel: ''
+})
+
+const isVerificationError = ref({
+  submitter: false,
+  signature: false,
+  authorized_email: false,
+  authorized_tel: false
+})
+
+const verificationData = () => {
+  const checkField = (field, errorKey) => {
+    const fieldValue = formData.value[field]
+    isVerificationError.value[errorKey] =
+      fieldValue === null || fieldValue === undefined || fieldValue === ''
+  }
+
+  checkField('Submitter', 'submitter')
+  checkField('signature', 'signature')
+  checkField('authorized_email', 'authorized_email')
+  checkField('authorized_tel', 'authorized_tel')
+}
+
+const handleSave = () => {
+  // Logic to save the settings
+  dialogVisible.value = false
+}
+
+defineExpose({
+  openDialog
+})
+</script>
+
+<template>
+  <div>
+    <el-dialog
+      v-model="dialogVisible"
+      title="Default Settings"
+      width="50%"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+    >
+      <div class="form">
+        <div class="form-row">
+          <div class="form-item">
+            <div class="label">
+              Submitter
+              <span class="require-asterisk">*</span>
+            </div>
+            <div class="content">
+              <el-input
+                :class="{ 'is-error': isVerificationError.submitter }"
+                v-model="formData.Submitter"
+                placeholder="Please enter..."
+                clearable
+                @blur="verificationData"
+              ></el-input>
+            </div>
+          </div>
+          <div class="form-item">
+            <div class="label">
+              Signature
+              <span class="require-asterisk">*</span>
+            </div>
+            <div class="content">
+              <el-input
+                :class="{ 'is-error': isVerificationError.signature }"
+                v-model="formData.signature"
+                placeholder="Please enter..."
+                clearable
+                @blur="verificationData"
+              ></el-input>
+            </div>
+          </div>
+        </div>
+        <div class="form-row">
+          <div class="form-item">
+            <div class="label">
+              Authorized Email
+              <span class="require-asterisk">*</span>
+            </div>
+            <div class="content">
+              <el-input
+                :class="{ 'is-error': isVerificationError.authorized_email }"
+                v-model="formData.authorized_email"
+                placeholder="Please enter..."
+                clearable
+                @blur="verificationData"
+              ></el-input>
+            </div>
+          </div>
+          <div class="form-item">
+            <div class="label">
+              Authorized Tel
+              <span class="require-asterisk">*</span>
+            </div>
+            <div class="content">
+              <el-input
+                :class="{ 'is-error': isVerificationError.authorized_tel }"
+                v-model="formData.authorized_tel"
+                placeholder="Please enter..."
+                clearable
+                @blur="verificationData"
+              ></el-input>
+            </div>
+          </div>
+        </div>
+      </div>
+      <template #footer>
+        <el-button class="el-button--default" style="height: 40px" @click="dialogVisible = false"
+          >Cancel</el-button
+        >
+        <el-button @click="handleSave" class="el-button--dark" style="height: 40px">Save</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.form {
+  position: relative;
+  .form-row {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 16px;
+    margin-bottom: 16px;
+    .form-item {
+      flex: 1;
+      .label {
+        display: flex;
+        align-items: flex-start;
+        margin-bottom: 8px;
+        font-size: 12px;
+        line-height: 16px;
+        color: var(--dashboard-text-color);
+
+        .require-asterisk {
+          margin-left: 2px;
+          font-size: 16px;
+          line-height: 16px;
+          color: #c9353f;
+        }
+      }
+      .content {
+        display: flex;
+        align-items: center;
+        height: 32px;
+        .el-input {
+          width: 100%;
+        }
+        .is-error {
+          :deep(.el-input__wrapper) {
+            box-shadow: 0 0 0 1px red;
+          }
+        }
+      }
+    }
+  }
+  .default-setting {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    height: 21px;
+    line-height: 21px;
+    color: var(--color-theme);
+    border-bottom: 1px solid var(--color-theme);
+    cursor: pointer;
+  }
+}
+</style>

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

@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import dayjs from 'dayjs'
 import { useRoute, useRouter } from 'vue-router'
-import { autoWidth } from '@/utils/table'
+// import { autoWidth } from '@/utils/table'
 import { type VxeGridInstance, type VxeGridProps } from 'vxe-table'
+import DefaultSettingDialog from './DefaultSettingDialog.vue'
 
 const route = useRoute()
 const router = useRouter()
@@ -364,6 +365,13 @@ const stopScroll = (evt) => {
   }
   return false
 }
+
+const defaultSettingDialogRef = ref<InstanceType<typeof DefaultSettingDialog> | null>(null)
+const openDefaultSettingDialog = () => {
+  if (defaultSettingDialogRef.value) {
+    defaultSettingDialogRef.value.openDialog()
+  }
+}
 </script>
 
 <template>
@@ -472,6 +480,7 @@ const stopScroll = (evt) => {
               </div>
             </div>
           </div>
+          <div class="default-setting" @click="openDefaultSettingDialog">Default Setting</div>
         </div>
       </div>
       <div class="detail-info" style="margin-top: 8px">
@@ -526,6 +535,7 @@ const stopScroll = (evt) => {
         </div>
       </div>
     </div>
+    <DefaultSettingDialog ref="defaultSettingDialogRef"></DefaultSettingDialog>
   </div>
 </template>
 
@@ -611,6 +621,7 @@ const stopScroll = (evt) => {
     padding: 0 16px 8px;
   }
   .form {
+    position: relative;
     .form-row {
       display: flex;
       flex-wrap: wrap;
@@ -648,6 +659,16 @@ const stopScroll = (evt) => {
         }
       }
     }
+    .default-setting {
+      position: absolute;
+      top: 8px;
+      right: 8px;
+      height: 21px;
+      line-height: 21px;
+      color: var(--color-theme);
+      border-bottom: 1px solid var(--color-theme);
+      cursor: pointer;
+    }
   }
 }
 .data-info {