协议调度页面布局优化

src/views/quoteConfig/dispatch/index.vue

@@ -1,119 +1,66 @@
 <template>
-  <div class="dispatch">
-    <PageMain class="vh100" style="overflow: hidden">
-      <ElRow class="vh99">
-        <ElCol :md="4">
-          <div
-            class="flex f-c"
-            style="
+  <div class="dispatch flex  ">
+    <PageMain class="vh100" style="min-width: 320px;">
+      <div class="flex f-c" style="
               height: 100%;
               border-right: 1px solid #eeeeee;
               padding-right: 17px;
-            "
-          >
-            <ElFormItem>
-              <ElInput
-                v-model="searchValue"
-                placeholder="输入编码，名称查找"
-                type="text"
-                tabindex="1"
-                style="width: 100%"
-              >
-                <template #prefix>
-                  <SvgIcon name="i-ri:user-3-fill" />
-                </template>
-                <template #append>
-                  <el-button
-                    :icon="Search"
-                    class="ElInputSearch"
-                    @click="findpage"
-                  />
-                </template>
-              </ElInput>
-            </ElFormItem>
-            <div
-              style="width: 100%; height: calc(100vh - 350px); overflow-y: auto"
-              class="container"
-            >
-              <div
-                class="list-item"
-                :class="currentIndex == index ? 'active' : ''"
-                v-for="(item, index) in filterList"
-                :key="item.id"
-                @click="roleitemClick(item, index)"
-              >
-                <span>{{ item.name }}</span>
-              </div>
-            </div>
+            ">
+        <ElFormItem>
+          <ElInput v-model="searchValue" placeholder="输入编码，名称查找" type="text" tabindex="1" style="width: 100%">
+            <template #prefix>
+              <SvgIcon name="i-ri:user-3-fill" />
+            </template>
+            <template #append>
+              <el-button :icon="Search" class="ElInputSearch" @click="findpage" />
+            </template>
+          </ElInput>
+        </ElFormItem>
+        <div style="width: 100%; height: calc(100vh - 350px); overflow-y: auto" class="container">
+          <div class="list-item" :class="currentIndex == index ? 'active' : ''" v-for="(item, index) in filterList"
+            :key="item.id" @click="roleitemClick(item, index)">
+            <span>{{ item.name }}</span>
           </div>
-        </ElCol>
-        <ElCol :md="20">
+        </div>
+      </div>
+    </PageMain>
+    <PageMain class="vh100" style="width: calc(100% - 250px);">
+      <ElRow class="vh99">
+        <ElCol :span="24">
           <div class="right">
             <div class="top">
               <span>调度规则</span>
-              <el-button type="text" @click="drawer = true"
-                >+添加新方案</el-button
-              >
+              <el-button type="text" @click="drawer = true">+添加新方案</el-button>
             </div>
             <div class="empty" v-if="ruleList.length == 0">
               <img src="@/assets/images/empty.png" alt="" />暂无内容
             </div>
-            <div class="center" v-else>
+            <div class="center flex flex-wrap" v-else>
               <!-- 规则列表：循环处理后的ruleList -->
-              <div
-                class="rule-item"
-                v-for="(item, ruleIndex) in ruleList"
-                :key="item.dispatchId"
-
-              >
+              <div class="rule-item" v-for="(item, ruleIndex) in ruleList" :key="item.dispatchId">
                 <div class="item-title">
                   <div class="name" v-if="!item.editMode">
                     {{ item.dispatchName }}
                   </div>
                   <div class="name" v-else>
-                    <el-input
-                      v-model="item.dispatchName"
-                      style="width: 240px"
-                      :placeholder="item.dispatchName"
-                      @blur="saveDispatchName(item)"
-                    />
+                    <el-input v-model="item.dispatchName" style="width: 240px" :placeholder="item.dispatchName"
+                      @blur="saveDispatchName(item)" />
                   </div>
-                  <img
-                    src="@/assets/images/edit.png"
-                    @click.stop="item.editMode = !item.editMode"
-                  />
-                  <img
-                    src="@/assets/images/add.png"
-                    style="margin: 0px 12px"
-                    @click.stop="editDispatch(item)"
-                  />
-                  <el-popconfirm
-                    class="box-item"
-                    title="是否确定删除该规则？"
-                    placement="bottom"
-                    width="196px"
-                    confirm-button-text="确定删除"
-                    @confirm.stop.prevent="deleteRule( item.dispatchId)"
-                  >
+                  <img src="@/assets/images/edit.png" @click.stop="item.editMode = !item.editMode" />
+                  <img src="@/assets/images/add.png" style="margin: 0px 12px" @click.stop="editDispatch(item)" />
+                  <el-popconfirm class="box-item" title="是否确定删除该规则？" placement="bottom" width="196px"
+                    confirm-button-text="确定删除" @confirm.stop.prevent="deleteRule(item.dispatchId)">
                     <template #reference>
-                      <img src="@/assets/images/delete.png"  @click.stop
-                    /></template>
+                      <img src="@/assets/images/delete.png" @click.stop /></template>
                   </el-popconfirm>
                 </div>
                 <p>当报价信息满足以下条件时</p>
 
                 <div class="condition">
-                  <div
-                    class="section-group"
-                    v-for="(sectionGroup, groupIndex) in item.groupedAttrLinks"
-                    :key="groupIndex"
-                  >
+                  <div class="section-group" v-for="(sectionGroup, groupIndex) in item.groupedAttrLinks"
+                    :key="groupIndex">
                     <div class="condition-one" @click.stop="ruleitemEdit(item)">
-                      <div
-                        class="dispatch-item"
-                        v-for="(row, index) in sectionGroup"
-                        :key="row.id"
-                      >
+                      <div class="dispatch-item" v-for="(row, index) in sectionGroup" :key="row.id">
                         {{ row.attrCodeName || "未设置属性" }}
                         <div class="opera">
                           {{ row.operatorDesc }}
@@ -143,39 +90,31 @@
                           </template>
                         </div> -->
                         <div class="value">
-                          <template
-                            v-if="  row.min &&row.max"
-                          >
+                          <template v-if="row.min && row.max">
                             {{ row.min }}~{{ row.max }}
                           </template>
-                          <template
-                            v-else-if="row.attrDesc "
-                          >
-                           {{
+                          <template v-else-if="row.attrDesc">
+                            {{
                               Array.isArray(row.attrDesc)
                                 ? row.attrDesc.join(",")
                                 : row.attrDesc || "无"
                             }}
                           </template>
-                          <template
-                            v-else
-                          >
+                          <template v-else>
                             {{ row.min }}
                           </template>
                         </div>
                       </div>
                     </div>
 
-                    <div
-                      style="margin: 0px 16px 10px; font-size: 16px"
-                      v-if="groupIndex < item.groupedAttrLinks.length - 1"
-                    >
+                    <div style="margin: 0px 16px 10px; font-size: 16px"
+                      v-if="groupIndex < item.groupedAttrLinks.length - 1">
                       或者
                     </div>
                   </div>
 
                   <div style="margin: 0px 16px 10px">将执行以下动作</div>
-                  <div class="action" v-if="item.actions.length > 0"  @click.stop="ruleitemEdit(item)">
+                  <div class="action" v-if="item.actions.length > 0" @click.stop="ruleitemEdit(item)">
                     <div class="name">
                       {{ item.actions[0].actionName }}
                     </div>
@@ -184,7 +123,7 @@
                       "未设置协议名称"
                     }}
                   </div>
-                  <div class="action" v-if="item.actions.length > 1"  @click.stop="ruleitemEdit(item)">
+                  <div class="action" v-if="item.actions.length > 1" @click.stop="ruleitemEdit(item)">
                     <div class="name">
                       变更 {{ item.actions[1].actionName }}的
                       {{
@@ -193,9 +132,7 @@
                           : "保司账号"
                       }}
                     </div>
-                    <template
-                      v-if="item.actions[1].actionCode == 'change_poc'"
-                    >
+                    <template v-if="item.actions[1].actionCode == 'change_poc'">
                       {{ item.actions[1].actionJson.name || "未设置" }}-{{
                         item.actions[1].actionJson.phone || "未设置"
                       }}
@@ -213,7 +150,6 @@
                   </div>
                 </div>
               </div>
-
               <!-- 其他情况规则 -->
               <div class="rule-item">
                 <div class="item-title">
@@ -236,25 +172,18 @@
                 <p>
                   如存在不满足其它规则的情况下，则进入该情况，请选择该情况下要执行的动作
                 </p>
-                <div
-                  class="other"
-                  @click="(isother = true), (companyId = companyId)"
-                >
+                <div class="other" @click="(isother = true), (companyId = companyId)">
                   点击选择该情况下要执行的动作
                 </div>
-                <div
-                  class="condition"
-                  v-for="item in afterActions"
-                  :key="item.id"
-                >
+                <div class="condition" v-for="item in afterActions" :key="item.id">
                   <div class="action" v-if="item.actionCode == 'send_notify_msg'">
                     <div class="name">
                       {{ item.actionName }}
                     </div>
-                    <div>标题：{{item.actionJson.title}}</div>
-                    <div>内容：{{item.actionJson.content}}</div>
+                    <div>标题：{{ item.actionJson.title }}</div>
+                    <div>内容：{{ item.actionJson.content }}</div>
                   </div>
-                   <div class="action" v-else-if="item.actionCode == 'supplementary_order'">
+                  <div class="action" v-else-if="item.actionCode == 'supplementary_order'">
                     <div class="name">
                       {{ item.actionName }}
                     </div>
@@ -273,13 +202,7 @@
         </ElCol>
       </ElRow>
     </PageMain>
-    <rule
-      v-if="drawer"
-      @close="handleClose"
-      :editData="editData"
-      :companyId="currentId"
-      :editType="editType"
-    />
+    <rule v-if="drawer" @close="handleClose" :editData="editData" :companyId="currentId" :editType="editType" />
     <other v-if="isother" :companyId="companyId" @close="closeOther"></other>
   </div>
 </template>
@@ -398,11 +321,11 @@ const findpage = () => {
   // api.dispatchApi.searchCompany({ keyword: searchValue.value }).then((res) => {
   //   tenantList.value = res.data || [];
   // });
-    if(searchValue.value) {
-        filterList.value = tenantList.value.filter(a => a.name.includes(searchValue.value))
-    } else {
-        filterList.value = tenantList.value
-    }
+  if (searchValue.value) {
+    filterList.value = tenantList.value.filter(a => a.name.includes(searchValue.value))
+  } else {
+    filterList.value = tenantList.value
+  }
 };
 
 const editDispatch = (item: any) => {
@@ -412,7 +335,7 @@ const editDispatch = (item: any) => {
   drawer.value = true;
 };
 
-const ruleitemEdit = (item:any) => {
+const ruleitemEdit = (item: any) => {
   editData.value = item;
   editType.value = 'edit'
   drawer.value = true;
@@ -448,6 +371,7 @@ getCompanyList();
 .dispatch {
   width: 100%;
 }
+
 .ElInputSearch {
   color: #fff !important;
   background: linear-gradient(91deg, #4fcaff 0%, #2b62ff 100%) !important;
@@ -455,6 +379,7 @@ getCompanyList();
   border-top-left-radius: 0 !important;
   border-bottom-left-radius: 0 !important;
 }
+
 .list-item {
   cursor: pointer;
   height: 36px;
@@ -462,10 +387,12 @@ getCompanyList();
   line-height: 36px;
   padding-left: 8px;
 }
+
 .active {
   background: #f4faff;
   border-right: 1px solid #0083ff;
 }
+
 .left {
   width: 20%;
   border-right: 1px solid #123ea3;
@@ -473,12 +400,14 @@ getCompanyList();
   border-radius: 0px;
   overflow-y: auto;
 }
+
 .right {
   height: 100%;
   overflow-x: auto;
   display: flex;
   flex-direction: column;
 }
+
 .top {
   width: 100%;
   height: 42px;
@@ -487,12 +416,14 @@ getCompanyList();
   display: flex;
   align-items: start;
   justify-content: space-between;
+
   span {
     font-size: 20px;
     color: #333333;
     font-weight: 600;
   }
 }
+
 .empty {
   width: 100%;
   flex: 1;
@@ -502,17 +433,19 @@ getCompanyList();
   align-items: center;
   justify-content: center;
   font-size: 14px;
+
   img {
     width: 180px;
   }
 }
+
 .center {
   width: 100%;
   flex: 1;
   padding: 24px 24px 0px 24px;
-  display: flex;
   overflow-x: auto;
   gap: 24px;
+
   .rule-item {
     min-width: 423px;
     max-width: 423px;
@@ -520,6 +453,7 @@ getCompanyList();
     border-radius: 4px;
     border: 1px solid #eeeeee;
     overflow-y: auto;
+
     .item-title {
       height: 40px;
       background: #f7f7f9;
@@ -527,16 +461,19 @@ getCompanyList();
       border-bottom: 1px solid #eeeeee;
       padding: 4px 16px;
       margin-bottom: 20px;
+
       .name {
         width: 283px;
         margin-right: 24px;
       }
+
       img {
         width: 20px;
         height: 20px;
         cursor: pointer;
       }
     }
+
     p {
       margin: 0;
       padding-left: 16px;
@@ -545,8 +482,9 @@ getCompanyList();
 
     .condition {
       width: 100%;
-      .section-group {
-      }
+
+      .section-group {}
+
       .condition-one {
         width: 391px;
         padding: 12px;
@@ -555,6 +493,7 @@ getCompanyList();
         margin: 10px auto 20px;
         cursor: pointer;
       }
+
       .dispatch-item {
         display: flex;
         align-items: center;
@@ -574,10 +513,12 @@ getCompanyList();
           color: #666666;
           padding: 0 10px;
         }
+
         .value {
           font-size: 14px;
         }
       }
+
       .action {
         width: 391px;
         margin: 0 auto 10px;
@@ -589,6 +530,7 @@ getCompanyList();
         color: #333333;
         line-height: 22px;
         cursor: pointer;
+
         .name {
           width: 100%;
           height: 40px;
@@ -600,6 +542,7 @@ getCompanyList();
         }
       }
     }
+
     .other {
       width: 391px;
       height: 46px;
@@ -614,10 +557,12 @@ getCompanyList();
     }
   }
 }
+
 .item-title {
   display: flex;
   align-items: center;
   margin-bottom: 20px;
+
   span {
     display: inline-block;
     width: 4px;
@@ -627,20 +572,25 @@ getCompanyList();
     margin-right: 8px;
   }
 }
+
 .form-item {
   display: flex;
   align-items: center;
+
   span {
     font-size: 14px;
     margin-right: 10px;
   }
 }
+
 :deep(.main-container) {
   height: 100%;
 }
+
 :deep(.el-row) {
   height: 100%;
 }
+
 :deep(.el-drawer__header) {
   height: 48px;
   font-size: 20px;
@@ -649,6 +599,7 @@ getCompanyList();
   margin-bottom: 24px;
   padding-bottom: 20px;
 }
+
 :deep(.el-drawer__body) {
   padding: 0 24px;
 }