From 40684a2b78f293fe9f20fe0f8da43d91c918a009 Mon Sep 17 00:00:00 2001
From: Joe <1712833832@qq.com>
Date: Wed, 10 Jan 2024 10:44:18 +0800
Subject: [PATCH] =?UTF-8?q?=E5=80=BC=E7=8F=AD=E4=BA=BA=E5=91=98=E5=AE=8C?=
 =?UTF-8?q?=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../views/JiHeExpressway/images/active.svg    |  26 ++++
 .../components/ModifyDutyInformationTable.vue |   8 +-
 .../views/dutyOfficer/index.vue               |   6 +-
 .../event/event/EventDetailDialog/Form.vue    |  61 +++++---
 .../event/EventDetailDialog/FormInput.vue     |  14 +-
 .../EventDetailDialog/FormTimePicker.vue      | 131 ++++++++++++++++++
 6 files changed, 221 insertions(+), 25 deletions(-)
 create mode 100644 ruoyi-ui/src/views/JiHeExpressway/images/active.svg
 create mode 100644 ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/EventDetailDialog/FormTimePicker.vue

diff --git a/ruoyi-ui/src/views/JiHeExpressway/images/active.svg b/ruoyi-ui/src/views/JiHeExpressway/images/active.svg
new file mode 100644
index 00000000..bf71e24e
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/images/active.svg
@@ -0,0 +1,26 @@
+<svg width="126" height="30" viewBox="0 0 126 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="&#233;&#128;&#137;&#228;&#184;&#173;">
+<g id="Group 1142814101">
+<rect id="Rectangle 499" opacity="0.7" x="2.55566" width="122.693" height="30" fill="url(#paint0_linear_450_517)"/>
+<ellipse id="Ellipse 139" cx="61.3463" cy="29.3887" rx="61.3463" ry="0.5" fill="url(#paint1_linear_450_517)"/>
+<ellipse id="Ellipse 140" cx="61.3463" cy="0.5" rx="61.3463" ry="0.5" fill="url(#paint2_linear_450_517)"/>
+</g>
+</g>
+<defs>
+<linearGradient id="paint0_linear_450_517" x1="2.55566" y1="15.6" x2="129.528" y2="15.6" gradientUnits="userSpaceOnUse">
+<stop stop-color="#A3FFF9" stop-opacity="0"/>
+<stop offset="0.526042" stop-color="#A3FFF9" stop-opacity="0.61"/>
+<stop offset="1" stop-color="#A3FFF9" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint1_linear_450_517" x1="0" y1="29.3887" x2="122.693" y2="29.3887" gradientUnits="userSpaceOnUse">
+<stop stop-color="#BDFFF6" stop-opacity="0"/>
+<stop offset="0.515625" stop-color="#BDFFF6"/>
+<stop offset="1" stop-color="#BDFFF6" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint2_linear_450_517" x1="0" y1="0.500028" x2="122.693" y2="0.500028" gradientUnits="userSpaceOnUse">
+<stop stop-color="#BDFFF6" stop-opacity="0"/>
+<stop offset="0.515625" stop-color="#BDFFF6"/>
+<stop offset="1" stop-color="#BDFFF6" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/businessDataManagement/views/dutyOfficer/components/ModifyDutyInformationTable.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/businessDataManagement/views/dutyOfficer/components/ModifyDutyInformationTable.vue
index f484e15d..eda8ab0a 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/businessDataManagement/views/dutyOfficer/components/ModifyDutyInformationTable.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/businessDataManagement/views/dutyOfficer/components/ModifyDutyInformationTable.vue
@@ -2,9 +2,7 @@
   <Dialog v-model="visibleModel" title="修改值班信息表">
     <div class="ModifyDutyInformationTable">
       <div class="search">
-        <div>
-          <Form :formList="formList" />
-        </div>
+        <Form :formList="formList" :rules="{ '桩号:': [{ required: true, message: '年龄不能为空' }] }" column="2" />
 
         <ButtonGradient>
           <template #prefix>
@@ -53,7 +51,7 @@ export default {
       formList: [{
         label: "值班时间:",
         key: "事件源",
-        type: "input",
+        type: "timePicker",
       },
       {
         label: "操作人员:",
@@ -93,8 +91,10 @@ export default {
 
   .search {
     display: flex;
+    gap: 24px;
     align-items: center;
     justify-content: space-between;
+
   }
 
   .body {
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/businessDataManagement/views/dutyOfficer/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/businessDataManagement/views/dutyOfficer/index.vue
index abbac64d..d4867363 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/businessDataManagement/views/dutyOfficer/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/businessDataManagement/views/dutyOfficer/index.vue
@@ -85,13 +85,13 @@
         </div>
       </template>
       <template #operation-content>
-        <ButtonGradient class="operate-button" @click.native="handleOperateRecord(true)">
+        <ButtonGradient class="operate-button" @click.native="handleModifyDutyInformationTable(true)">
           <template #prefix>
             <img src="@screen/images/form/edit.svg" />
           </template>
           修改
         </ButtonGradient>
-        <ButtonGradient class="operate-button" @click.native="handleModifyDutyInformationTable(true)">
+        <ButtonGradient class="operate-button" @click.native="handleOperateRecord(true)">
           <template #prefix>
             <img src="@screen/images/form/record.svg" />
           </template>
@@ -177,7 +177,7 @@ export default {
       })),
 
       operateRecordVisible: false,
-      modifyDutyInformationTableVisible: false
+      modifyDutyInformationTableVisible: true
     }
   },
   methods: {
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/EventDetailDialog/Form.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/EventDetailDialog/Form.vue
index 0cc68188..2a14206f 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/EventDetailDialog/Form.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/EventDetailDialog/Form.vue
@@ -1,26 +1,28 @@
 <template>
   <ElForm :style="getStyle()" :label-width="labelWidth" class="FormConfig" size="mini">
-    <ElFormItem class="formItem" v-for="(item, index) in formList" :key="item.key" :label="item.label"
-      :style="gridStyle(item, index)">
-      <FormInput v-bind="item.options" />
+    <ElFormItem class="formItem" :rules="rules[item.key] || []" v-for="(item, index) in formList" :key="item.key"
+      :label="item.label" :style="gridStyle(item, index)">
+      <component :is="getComponent(item.type)" v-bind="item.options" />
     </ElFormItem>
   </ElForm>
 </template>
 
 <script>
 import FormInput from "./FormInput.vue";
+import FormTimePicker from "./FormTimePicker.vue";
 
 export default {
   name: 'FormConfig',
   components: {
-    FormInput
+    FormInput,
+    FormTimePicker
   },
   props: {
     /**
      * {
      *  label: String;
      *  key: String;
-     *  type: 'input' | '',
+     *  type: 'input' | 'timePicker',
      *  gridArea?: "",
      *  gridColumn?: "",
      *  gridRow?: "",
@@ -33,7 +35,15 @@ export default {
     },
     labelWidth: {
       type: String,
-      default: "90px"
+      default: "auto"
+    },
+    rules: {
+      type: Object,
+      default: null
+    },
+    column: {
+      type: String,
+      default: "3"
     }
   },
   computed: {
@@ -47,9 +57,11 @@ export default {
   methods: {
     getStyle() {
       return {
-        // gridTemplateRows: `repeat(3, auto)`,
-        gridTemplateColumns: `repeat(3, 1fr)`,
+        gridTemplateColumns: `repeat(${this.column}, 1fr)`,
       }
+    },
+    getComponent(type) {
+      return `Form${type.replace(/^[a-z]/, word => word.toUpperCase())}`
     }
   }
 }
@@ -60,6 +72,8 @@ export default {
   display: grid;
   align-content: start;
   width: 100%;
+  flex: 1;
+  gap: 15px 15px;
 
   .formItem {
     display: flex;
@@ -69,19 +83,32 @@ export default {
 
   ::v-deep {
     .el-form-item {
-      .el-form-item__label {
-        height: 22px;
-        font-size: 16px;
-        // font-family: PingFang SC, PingFang SC;
-        font-weight: 400;
-        color: #3DE8FF;
-        line-height: 19px;
-        // -webkit-background-clip: text;
-        // -webkit-text-fill-color: transparent;
+      align-items: center;
+      margin: 0;
+      height: 100%;
+
+      .el-form-item__label-wrap {
+        width: fit-content;
+
+        .el-form-item__label {
+          height: 22px;
+          font-size: 16px;
+          // font-family: PingFang SC, PingFang SC;
+          font-weight: 400;
+          color: #3DE8FF;
+          line-height: 19px;
+          // -webkit-background-clip: text;
+          // -webkit-text-fill-color: transparent;
+        }
       }
 
       .el-form-item__content {
         margin: 0 !important;
+        flex: 1;
+
+        .el-input__prefix {
+          color: #fff;
+        }
       }
     }
   }
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/EventDetailDialog/FormInput.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/EventDetailDialog/FormInput.vue
index 0f4983dd..cc0b2cc4 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/EventDetailDialog/FormInput.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/EventDetailDialog/FormInput.vue
@@ -1,21 +1,33 @@
 <template>
-  <ElInput class='FormInput' />
+  <ElInput class='FormInput' v-bind="getBind" v-on="$listeners" />
 </template>
 
 <script>
 export default {
   name: 'FormInput',
+  computed: {
+    getBind() {
+      return {
+        placeholder: "请输入",
+        ...this.$attrs
+      }
+    }
+  }
 }
 </script>
 
 <style lang='scss' scoped>
 .FormInput {
+  height: 100%;
+
   ::v-deep {
     .el-input__inner {
       background-color: #0D5F79;
       color: #fff;
       border-radius: 2px;
       border: 0;
+      height: fit-content;
+      line-height: unset;
 
       &::placeholder {
         color: #fff;
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/EventDetailDialog/FormTimePicker.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/EventDetailDialog/FormTimePicker.vue
new file mode 100644
index 00000000..bc48c9b3
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/EventDetailDialog/FormTimePicker.vue
@@ -0,0 +1,131 @@
+<template>
+  <ElTimePicker class="TimeSelect" v-bind="getBind" v-on="$listeners" />
+</template>
+
+<script>
+export default {
+  name: 'TimeSelect',
+  computed: {
+    getBind() {
+      return {
+        placeholder: "请选择时间",
+        ...this.$attrs
+      }
+    }
+  }
+}
+</script>
+
+<style lang='scss'>
+body {
+
+  .el-time-range-picker.el-popper,
+  .el-popper.el-time-panel {
+    background: #064258;
+    border-radius: 3px;
+    border: 0;
+
+    .el-time-range-picker__body,
+    .el-time-panel__content {
+      border-radius: 9px;
+
+      &::after {
+        border: 0;
+        // background-image: url(~@screen/images/active.svg);
+      }
+
+      &::before {
+        border: 0;
+        margin-top: -12px;
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
+        background-image: url(~@screen/images/active.svg);
+        width: 100%;
+        margin-left: 0;
+        padding: 0;
+      }
+
+      .el-time-spinner__arrow {
+        color: #fff;
+      }
+
+      .el-time-spinner__item {
+        color: rgba(0, 209, 255, .51);
+
+        &:hover:not(.disabled):not(.active) {
+          background-color: unset;
+          color: rgba(0, 209, 255, 1);
+        }
+      }
+
+      .active {
+        color: rgba(0, 209, 255);
+      }
+    }
+
+    .el-time-range-picker__body {
+      border: 1px solid #00B3CC;
+    }
+
+    .el-time-panel__content {
+      &::before {
+        margin-top: -15px;
+      }
+    }
+
+    .el-time-range-picker__content {
+      .el-time-range-picker__cell {
+
+        .el-time-range-picker__header {
+          color: #fff;
+        }
+      }
+    }
+
+    .el-time-panel__footer {
+      border-top: 0;
+
+      .cancel {
+        color: #FFFFFF;
+      }
+
+      .confirm {
+        color: #01B4DE;
+      }
+    }
+
+    .popper__arrow {
+      border-bottom-color: #064258;
+
+      &::after {
+        border-bottom-color: #064258;
+      }
+    }
+  }
+}
+</style>
+<style lang='scss' scoped>
+.TimeSelect {
+  ::v-deep {
+    .el-range-input {
+      background-color: #0D5F79;
+    }
+
+    .el-range-separator {
+      color: #56CEFE;
+    }
+
+    &,
+    .el-input__inner {
+      background-color: #0D5F79;
+      color: #fff;
+      border-radius: 2px;
+      border: 0;
+
+      &::placeholder {
+        color: #fff;
+      }
+    }
+  }
+}
+</style>