试验检测表单

src/global/components/hc-new-switch/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="hc-new-switch">
+    <div class="hc-new-switch" :class="[`size-${size ?? 'large'}`, round ? 'round' : '']">
         <template v-for="item in datas">
             <div class="switch-bg" :class="item?.key == keyVal?'dots':''" @click="switchClick(item)">{{item?.name}}</div>
         </template>
@@ -16,7 +16,15 @@ const props = defineProps({
     keys: {
         type: [String,Number],
         default: ''
-    }
+    },
+    size: { //large / default /small
+        type: [String,Number],
+        default: 'large'
+    },
+    round: {
+        type: Boolean,
+        default: true
+    },
 })
 
 //监听
@@ -43,15 +51,15 @@ const switchClick = (item) => {
     height: 40px;
     font-size: 14px;
     background: #f1f5f8;
-    border-radius: 40px;
-    display: flex;
+    border-radius: 4px;
+    display: inline-flex;
     align-items: center;
     padding: 0 4px;
     box-shadow: 4px 4px 8px 0 rgba(54,92,167,0.15) inset, -4px -4px 8px 0 #ffffff inset;
     .switch-bg {
         color: #838791;
         padding: 0 14px;
-        border-radius: 80px;
+        border-radius: 4px;
         height: 30px;
         display: flex;
         align-items: center;
@@ -60,11 +68,24 @@ const switchClick = (item) => {
             color: #ffffff;
             background: linear-gradient(90deg,var(--el-color-primary-light-5), var(--el-color-primary) 100%);
             box-shadow: 4px 4px 8px 0 rgba(54,92,167,0.15), -3px -2px 8px 0 #ffffff;
-            transition: background 0.3s;
+            transition: .1s;
         }
         &:not(.dots) {
             cursor: pointer;
         }
     }
+    &.round {
+        border-radius: 40px;
+        .switch-bg {
+            border-radius: 80px;
+        }
+    }
+    &.size-default {
+        height: 32px;
+        font-size: 13px;
+        .switch-bg {
+            height: 25px;
+        }
+    }
 }
 </style>

src/styles/tentative/detect/test-form.scss

@@ -0,0 +1,5 @@
+.hc-search-top-form {
+    position: relative;
+    display: flex;
+    align-items: center;
+}

src/views/tentative/detect/test-form.vue

@@ -10,10 +10,36 @@
                     <HcIcon name="folder-shield"/>
                     <span>监理质检</span>
                 </el-button>
-
+            </template>
+            <template #extra>
+                <el-button type="primary" hc-btn>关联工程用途及部位</el-button>
+                <el-button type="primary" hc-btn>关联原材检测报告</el-button>
+                <el-button type="primary" hc-btn>关联取样</el-button>
             </template>
             <template #search>
-
+                <div class="flex-1">
+                    <HcNewSwitch :datas="tabTypeTab" :keys="tabTypeKey" @change="tabTypeChange" size="default" :round="false"/>
+                </div>
+                <div class="hc-search-top-form">
+                    <div class="w-36">
+                        <el-date-picker type="date" v-model="topFormModel.key1" class="block" value-format="YYYY-MM-DD" :clearable="false" placeholder="请选择报告日期"/>
+                    </div>
+                    <div class="w-28 ml-2">
+                        <el-select v-model="topFormModel.key2" placeholder="是否合格" block>
+                            <el-option label="合格" value="1" />
+                            <el-option label="不合格" value="2" />
+                        </el-select>
+                    </div>
+                    <div class="w-36 ml-2">
+                        <el-select v-model="topFormModel.key3" placeholder="选择检测类型" block>
+                            <el-option label="自检" value="1" />
+                            <el-option label="抽检" value="2" />
+                            <el-option label="平行试验" value="3" />
+                            <el-option label="验证试验" value="4" />
+                            <el-option label="中心实验室抽检" value="5" />
+                        </el-select>
+                    </div>
+                </div>
             </template>
 
             <template #action>
@@ -33,6 +59,7 @@ const useRoutes = useRoute()
 const useAppState = useAppStore()
 const projectId = ref(useAppState.getProjectId);
 const contractId = ref(useAppState.getContractId);
+const contractInfo = ref(useAppState.getContractInfo);
 
 //路由参数
 const routerQuery = useRoutes?.query;
@@ -43,7 +70,7 @@ const fileType = parseInt(routerQuery?.fileType + '') || 2;
 
 //渲染完成
 onMounted(() => {
-
+    setContractType(contractInfo.value?.contractType)
 })
 
 //身份按钮切换数据
@@ -55,6 +82,38 @@ const authBtnTabClick = (val) => {
     }
 }
 
+//contractType,  1施工，2监理
+const setContractType = (contractType) => {
+    if (contractType <= 0) {
+        authBtnTabKey.value = '1'
+    } else {
+        authBtnTabKey.value = contractType + ''
+    }
+}
+
+//类型tab数据和相关处理
+const tabTypeKey = ref('tab1')
+const tabTypeTab = ref([
+    {key:'tab1',  name: '记录表'},
+    {key:'tab2', name: '报告单'},
+]);
+const tabTypeChange = (item) => {
+    tabTypeKey.value = item?.key
+}
+
+//顶部表单
+const topFormRef = ref(null)
+const topFormModel = ref({})
+const topFormRules = {
+    key1: {
+        required: true,
+        trigger: 'blur',
+        message: "请输入"
+    }
+}
+
+const searchForm = ref({})
+
 </script>
 
 <style lang="scss" scoped>