静态页面

components.d.ts

@@ -37,6 +37,7 @@ declare module 'vue' {
     TMenuItem: typeof import('tdesign-vue-next')['MenuItem']
     TOption: typeof import('tdesign-vue-next')['Option']
     TPopconfirm: typeof import('tdesign-vue-next')['Popconfirm']
+    TRadio: typeof import('tdesign-vue-next')['Radio']
     TRadioGroup: typeof import('tdesign-vue-next')['RadioGroup']
     TRow: typeof import('tdesign-vue-next')['Row']
     TSelect: typeof import('tdesign-vue-next')['Select']

src/style/global.less

@@ -52,3 +52,43 @@ body {
   color: #333;
   font-weight: bold;
 }
+
+.read-only {
+  height: 30px;
+  border-radius: 4px;
+  background-color: #f5f6f8;
+  line-height: 30px;
+  padding-left: 8px;
+  width: 100%;
+}
+.my-form-item {
+  .t-form__controls-content {
+    flex-direction: column;
+    align-items: flex-start;
+    .sub-title {
+      margin-bottom: 10px;
+      p {
+        font-size: 13px;
+        line-height: 1.4;
+      }
+    }
+    .top-label {
+      font-size: 14px;
+      margin-bottom: 5px;
+      // margin-left: -8px;
+      span {
+        color: red;
+      }
+      p {
+        font-weight: bold;
+        flex: 1;
+      }
+      .require-icon {
+        margin-right: 3px;
+        &.hide {
+          opacity: 0;
+        }
+      }
+    }
+  }
+}

src/style/tdesign-reset.less

@@ -34,3 +34,7 @@
 .t-head-menu__inner .t-menu:first-child {
   margin-left: 0;
 }
+.t-col > .t-form__item {
+  width: 100%;
+  margin-right: 0;
+}

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

@@ -3,10 +3,80 @@
     :visible="visible"
     @close="emit('update:visible', false)"
     :header="title"
-    :width="750"
+    :width="900"
     :closeOnOverlayClick="false"
   >
     <t-form ref="formRef" :model="formData" layout="inline" labelWidth="120px">
+      <t-row :gutter="[0, 20]">
+        <t-col :span="4">
+          <t-form-item label="人员档案编号">
+            <span>123456*****</span>
+          </t-form-item>
+        </t-col>
+        <t-col :span="4">
+          <t-form-item label="姓名">
+            <t-input v-model="formData.a"></t-input>
+          </t-form-item>
+        </t-col>
+        <t-col :span="4">
+          <t-form-item label="常住区域">
+            <t-select v-model="formData.b"></t-select>
+          </t-form-item>
+        </t-col>
+        <t-col :span="4">
+          <t-form-item label="身份证号">
+            <t-input v-model="formData.c"></t-input>
+          </t-form-item>
+        </t-col>
+        <t-col :span="4">
+          <t-form-item label="性别">
+            <t-select v-model="formData.d"></t-select>
+          </t-form-item>
+        </t-col>
+        <t-col :span="4">
+          <t-form-item label="学历">
+            <t-select v-model="formData.e"></t-select>
+          </t-form-item>
+        </t-col>
+        <t-col :span="4">
+          <t-form-item label="手机号">
+            <t-input v-model="formData.f"></t-input>
+          </t-form-item>
+        </t-col>
+        <t-col :span="8">
+          <t-form-item label="电子邮箱">
+            <t-input v-model="formData.g"></t-input>
+          </t-form-item>
+        </t-col>
+        <t-col :span="12">
+          <t-form-item label="上传照片">
+            <t-upload
+              ref="uploadRef"
+              v-model="file"
+              theme="image"
+              tips="请上传近期清晰免冠一寸登记照，图片格式：JPEG、JPG、PNG、GIF格式，文件大小不超过2M，推荐尺寸大小：295*412，上传不符合要求的照片将影响现场服务人员正常的打卡签到。"
+              accept="image/*"
+              :locale="{
+                triggerUploadText: {
+                  image: '请选择图片',
+                },
+              }"
+              :size-limit="{ size: 2, unit: 'MB' }"
+              :request-method="requestMethod"
+            >
+              <!-- custom UI -->
+              <!-- <template #fileListDisplay="{ files }">
+          <div>{{ JSON.stringify(files) }}</div>
+        </template> -->
+            </t-upload>
+          </t-form-item>
+        </t-col>
+        <t-col :span="4">
+          <t-form-item label="所属供应商">
+            <t-select v-model="formData.i"></t-select>
+          </t-form-item>
+        </t-col>
+      </t-row>
     </t-form>
     <template #foot>
       <t-button theme="default" @click="emit('update:visible', false)"
@@ -20,7 +90,7 @@
 import { ref } from 'vue';
 const emit = defineEmits(['update:visible']);
 const formRef = ref(null);
-
+const file = ref([]);
 const props = defineProps({
   visible: Boolean,
   title: String,
@@ -30,4 +100,15 @@ const props = defineProps({
 defineExpose({
   formRef,
 });
+const requestMethod = (f) => {
+  return new Promise((rs) => {
+    rs({
+      status: 'success',
+      response: {
+        //测试上传成功后的服务器图片地址，后期根据实际情况替换
+        url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Fae175b96-62b4-4c48-ae36-a278a8a27e2c%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1693365377&t=363c6f09798e07b6ce44e61150763a72',
+      },
+    });
+  });
+};
 </script>

src/views/sop/components/LABEL.vue

@@ -17,12 +17,5 @@ const value = ref('');
     font-size: 14px;
     margin-bottom: 5px;
   }
-  .read-only {
-    height: 30px;
-    border-radius: 4px;
-    background-color: #f5f6f8;
-    line-height: 30px;
-    padding-left: 8px;
-  }
 }
 </style>

src/views/sop/components/my-form-item.vue

@@ -8,7 +8,7 @@
       <p
         v-for="(item, index) in config.subTitle"
         :key="index"
-        :style="{ color: item.color, fontSize: '13px', lineHeight: 1.4 }"
+        :style="{ color: item.color }"
       >
         {{ item.content }}
       </p>
@@ -72,32 +72,4 @@ const RenderTest = defineComponent({
   },
 });
 </script>
-<style scoped lang="less">
-.my-form-item {
-  :deep(.t-form__controls-content) {
-    flex-direction: column;
-    align-items: flex-start;
-    .sub-title {
-      margin-bottom: 10px;
-    }
-    .top-label {
-      font-size: 14px;
-      margin-bottom: 5px;
-      margin-left: -8px;
-      span {
-        color: red;
-      }
-      p {
-        font-weight: bold;
-        flex: 1;
-      }
-      .require-icon {
-        margin-right: 3px;
-        &.hide {
-          opacity: 0;
-        }
-      }
-    }
-  }
-}
-</style>
+<style scoped lang="less"></style>

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

@@ -5,7 +5,6 @@
     <div class="flex-1 page-wrap">
       <div class="btn-group">
         <t-button theme="success">批量作废</t-button>
-        <t-button theme="success">项目计划变更</t-button>
       </div>
       <t-table
         size="small"

src/views/sop/sop-manage/office-sop/plan-change-dialog.vue

@@ -3,10 +3,133 @@
     :visible="visible"
     @close="emit('update:visible', false)"
     header="项目计划变更"
-    :width="800"
+    :width="980"
     :closeOnOverlayClick="false"
   >
-    <t-form ref="formRef" :model="formData" labelWidth="120px"> </t-form>
+    <t-form ref="formRef" :model="formData" :labelWidth="0">
+      <t-row :gutter="[0, 20]">
+        <t-col :span="6">
+          <t-form-item class="my-form-item">
+            <div class="top-label flex items-center">
+              <p>提交时间</p>
+            </div>
+            <div class="read-only"></div>
+          </t-form-item>
+        </t-col>
+        <t-col :span="6">
+          <t-form-item class="my-form-item">
+            <div class="top-label flex items-center">
+              <p>客户经理</p>
+            </div>
+            <div class="read-only"></div>
+          </t-form-item>
+        </t-col>
+        <t-col :span="6">
+          <t-form-item class="my-form-item">
+            <div class="top-label flex items-center">
+              <p>客户类型</p>
+            </div>
+            <div class="read-only"></div>
+          </t-form-item>
+        </t-col>
+        <t-col :span="6">
+          <t-form-item class="my-form-item">
+            <div class="top-label flex items-center">
+              <p>客户名称</p>
+            </div>
+            <div class="read-only"></div>
+          </t-form-item>
+        </t-col>
+        <t-col :span="6">
+          <t-form-item class="my-form-item">
+            <div class="top-label flex items-center">
+              <p>项目母单编号</p>
+            </div>
+            <div class="read-only"></div>
+          </t-form-item>
+        </t-col>
+        <t-col :span="6">
+          <t-form-item class="my-form-item">
+            <div class="top-label flex items-center">
+              <p>项目名称</p>
+            </div>
+            <div class="read-only"></div>
+          </t-form-item>
+        </t-col>
+        <t-col :span="6">
+          <t-form-item class="my-form-item">
+            <div class="top-label flex items-center">
+              <p>项目经理</p>
+            </div>
+            <div class="read-only"></div>
+          </t-form-item>
+        </t-col>
+        <t-col :span="6">
+          <t-form-item class="my-form-item">
+            <div class="top-label flex items-center">
+              <p>考试开始时间</p>
+            </div>
+            <div class="read-only"></div>
+          </t-form-item>
+        </t-col>
+        <t-col :span="6">
+          <t-form-item class="my-form-item">
+            <div class="top-label flex items-center">
+              <p>考试结束时间</p>
+            </div>
+            <div class="read-only"></div>
+          </t-form-item>
+        </t-col>
+        <t-col :span="6">
+          <t-form-item class="my-form-item">
+            <div class="top-label flex items-center">
+              <p>特殊要求及备注</p>
+            </div>
+            <div class="read-only"></div>
+          </t-form-item>
+        </t-col>
+
+        <t-col :span="6">
+          <t-form-item class="my-form-item">
+            <div class="top-label flex items-center">
+              <span class="require-icon">*</span>
+              <p>变更原因</p>
+            </div>
+            <div class="sub-title">
+              <p :style="{ color: 'gray' }"> 请简要描述变更原因 </p>
+            </div>
+            <t-input v-model="formData.k"></t-input>
+          </t-form-item>
+        </t-col>
+        <t-col :span="6">
+          <t-form-item class="my-form-item">
+            <div class="top-label flex items-center">
+              <span class="require-icon">*</span>
+              <p>变更类型</p>
+            </div>
+            <div class="sub-title">
+              <p :style="{ color: 'gray' }">
+                1.请先选择“变更类型”，系统会给出相应的填写表单；
+              </p>
+              <p :style="{ color: 'gray' }">
+                2.关键信息及计划变更：项目关键信息里填写的项目关键信息或时间计划内容调整；
+              </p>
+              <p :style="{ color: 'gray' }">
+                3.处理时限报备：例如项目关键信息、项目总结报告、验收报告等提交时限有特殊原因需要调整，处理时限是指不在项目关键信息表填写的处理时限约束；
+              </p>
+              <p :style="{ color: 'gray' }">
+                4.项目取消：若项目取消，则只需填写变更原因后提交。
+              </p>
+            </div>
+            <t-radio-group v-model="formData.l">
+              <t-radio value="1">项目信息及计划变更</t-radio>
+              <t-radio value="2">处理时限报备</t-radio>
+              <t-radio value="3">项目取消</t-radio>
+            </t-radio-group>
+          </t-form-item>
+        </t-col>
+      </t-row>
+    </t-form>
     <template #foot>
       <t-button theme="default" @click="emit('update:visible', false)"
         >取消</t-button
@@ -28,6 +151,18 @@ const props = defineProps({
 const { data: formData } = useClearDialog(
   {
     a: '',
+    b: '',
+    c: '',
+    d: '',
+    e: '',
+    f: '',
+    g: '',
+    h: '',
+    i: '',
+    j: '',
+    k: '',
+    l: '',
+    m: [],
   },
   props
 );
@@ -36,3 +171,4 @@ const save = () => {
   emit('success');
 };
 </script>
+<style lang="less" scoped></style>

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

@@ -1,10 +1,8 @@
 <template>
   <div class="sop-flow">
     <div class="page-wrap">
-      <t-form colon :label-width="0" class="p-l-20px p-r-20px">
-        <t-row
-          :gutter="[{ xs: 8, sm: 16, md: 24, lg: 32, xl: 32, xxl: 40 }, 24]"
-        >
+      <t-form colon :label-width="0">
+        <t-row :gutter="[0, 20]">
           <t-col
             :span="config.span || 6"
             v-for="config in formConfig"

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

@@ -1,10 +1,8 @@
 <template>
   <div class="sop-flow">
     <div class="page-wrap">
-      <t-form colon :label-width="0" class="p-l-20px p-r-20px">
-        <t-row
-          :gutter="[{ xs: 8, sm: 16, md: 24, lg: 32, xl: 32, xxl: 40 }, 24]"
-        >
+      <t-form colon :label-width="0">
+        <t-row :gutter="[0, 20]">
           <t-col :span="6" v-for="config in baseConfig" :key="config.id">
             <MyFormItem :config="config"></MyFormItem>
           </t-col>
@@ -19,9 +17,7 @@
           :label="item.label"
         >
           <t-form ref="form" colon :label-width="0" class="cur-step-view">
-            <t-row
-              :gutter="[{ xs: 8, sm: 16, md: 24, lg: 32, xl: 32, xxl: 40 }, 24]"
-            >
+            <t-row :gutter="[0, 20]">
               <t-col
                 :span="
                   fullWidthCodes.includes(config.code) ? 12 : config.span || 6