UI 调整

3 years ago · b51afde8c1
4 changed files with 145 additions and 171 deletions
--- a/src/views/modules/communityService/dqfwzx/cpts/edit.vue
+++ b/src/views/modules/communityService/dqfwzx/cpts/edit.vue
@ -1,6 +1,6 @@
 <template>
  <div>
-    <div>
+    <div class="dialog-h-content scroll-h">
      <el-form ref="ref_form"
               :inline="true"
               :model="dataForm"
--- a/src/views/modules/communityService/dqfwzx/cpts/order.vue
+++ b/src/views/modules/communityService/dqfwzx/cpts/order.vue
@ -1,36 +1,28 @@
 <template>
  <div>
-    <div>
-      <el-form
-        ref="ref_form"
+    <div class="dialog-h-content scroll-h">
+      <el-form ref="ref_form"
               :inline="true"
               :model="dataForm"
               :rules="dataRule"
               :disabled="formType === 'detail'"
-        class="form"
-      >
-        <el-form-item
-          label="事项名称"
+               class="form">
+        <el-form-item label="事项名称"
                      prop="matterName"
                      label-width="150px"
-          style="display: block"
-        >
-          <el-input
-            class="item_width_1"
+                      style="display: block">
+          <el-input class="item_width_1"
                    maxlength="50"
                    show-word-limit
                    v-model="info.matterName"
-            disabled
-          >
+                    disabled>
          </el-input>
        </el-form-item>

-        <el-form-item
-          label="预约日期"
+        <el-form-item label="预约日期"
                      prop="appointmentDate"
                      label-width="150px"
-          style="display: block"
-        >
+                      style="display: block">
          <!-- <el-date-picker
            v-model="dataForm.appointmentDate"
            placeholder="预约日期"
@ -38,98 +30,77 @@
            :picker-options="dateOptions"
          >
          </el-date-picker> -->
-          <el-select v-model="dataForm.appointmentDate" placeholder="请选择">
-            <el-option
-              v-for="item in dateList"
+          <el-select v-model="dataForm.appointmentDate"
+                     placeholder="请选择">
+            <el-option v-for="item in dateList"
                       :key="item"
                       :label="item"
-              :value="item"
-            >
-            </el-option
-          ></el-select>
+                       :value="item">
+            </el-option>
+          </el-select>
        </el-form-item>

-        <el-form-item
-          v-if="timeList.length > 0"
+        <el-form-item v-if="timeList.length > 0"
                      label="预约时段"
                      prop="timeId"
                      label-width="150px"
-          style="display: block"
-        >
+                      style="display: block">
          <div style="margin-left: auto; width: 600px">
-            <el-checkbox
-              :label="item.timeId"
+            <el-checkbox :label="item.timeId"
                         :key="item.timeId"
                         :disabled="!item.isAppointment"
                         v-for="(item, index) in timeList"
                         :checked="item.selected"
                         :value="item.selected"
                         @change="selectTime(index)"
-              @onChange="selectTime(index)"
-              >{{ item.time }}</el-checkbox
-            >
+                         @onChange="selectTime(index)">{{ item.time }}</el-checkbox>
          </div>
        </el-form-item>

-        <el-form-item
-          label="预约人"
+        <el-form-item label="预约人"
                      prop="appointmentName"
                      label-width="150px"
-          style="display: block"
-        >
-          <el-input
-            class="item_width_1"
+                      style="display: block">
+          <el-input class="item_width_1"
                    maxlength="50"
                    show-word-limit
                    placeholder="请输入预约人"
-            v-model="dataForm.appointmentName"
-          >
+                    v-model="dataForm.appointmentName">
          </el-input>
        </el-form-item>

-        <el-form-item
-          label="联系方式"
+        <el-form-item label="联系方式"
                      prop="appointmentPhone"
                      label-width="150px"
-          style="display: block"
-        >
-          <el-input
-            class="item_width_1"
+                      style="display: block">
+          <el-input class="item_width_1"
                    maxlength="50"
                    show-word-limit
                    placeholder="请输入联系方式"
-            v-model="dataForm.appointmentPhone"
-          >
+                    v-model="dataForm.appointmentPhone">
          </el-input>
        </el-form-item>

-        <el-form-item
-          label="备注"
+        <el-form-item label="备注"
                      prop="remark"
                      label-width="150px"
-          style="display: block"
-        >
-          <el-input
-            class="item_width_1"
+                      style="display: block">
+          <el-input class="item_width_1"
                    type="textarea"
                    maxlength="1000"
                    show-word-limit
                    :rows="3"
                    placeholder="请输入备注，不超过1000字"
-            v-model="dataForm.remark"
-          ></el-input>
+                    v-model="dataForm.remark"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <div class="div_btn">
      <el-button @click="handleCancle">取 消</el-button>
-      <el-button
-        v-if="formType != 'detail'"
+      <el-button v-if="formType != 'detail'"
                 type="primary"
                 :disabled="btnDisable"
-        @click="handleComfirm"
-        >确 定</el-button
-      >
+                 @click="handleComfirm">确 定</el-button>
    </div>
  </div>
 </template>
--- a/src/views/modules/communityService/dqfwzx/cpts/orderList.vue
+++ b/src/views/modules/communityService/dqfwzx/cpts/orderList.vue
@ -1,55 +1,55 @@
 <template>
  <div style="min-height: 400px">
-    <el-form ref="ref_form" :inline="true" class="form">
-      <el-form-item
-        label="选择预约日期"
+    <el-form ref="ref_form"
+             :inline="true"
+             class="form">
+      <el-form-item label="选择预约日期"
                    prop="appointmentDate"
                    label-width="110px"
-        style="display: block"
-      >
-        <el-date-picker
-          v-model="appointmentDate"
+                    style="display: block">
+        <el-date-picker v-model="appointmentDate"
                        placeholder="预约日期"
-          value-format="yyyy-MM-dd"
-        >
+                        value-format="yyyy-MM-dd">
        </el-date-picker>
      </el-form-item>
    </el-form>

-    <el-table
-      v-if="tableData.length > 0"
+    <el-table v-if="tableData.length > 0"
              :data="tableData"
              border
              style="width: 96%; margin: 0 auto"
              class="resi-table"
-      :max-height="maxTableHeight"
-    >
-      <el-table-column label="序号" type="index" align="center" width="50" />
-      <el-table-column prop="matterName" label="预约事项"></el-table-column>
-      <el-table-column
-        prop="appointmentTime"
-        label="预约时间"
-      ></el-table-column>
-      <el-table-column prop="appointmentName" label="预约人"></el-table-column>
-      <el-table-column
-        prop="appointmentPhone"
-        label="联系方式"
-      ></el-table-column>
-      <el-table-column prop="remark" label="备注"></el-table-column>
-      <el-table-column fixed="right" label="操作" align="center" width="120">
+              :max-height="maxTableHeight">
+      <el-table-column label="序号"
+                       type="index"
+                       align="center"
+                       width="50" />
+      <el-table-column prop="matterName"
+                       label="预约事项"></el-table-column>
+      <el-table-column prop="appointmentTime"
+                       label="预约时间"></el-table-column>
+      <el-table-column prop="appointmentName"
+                       label="预约人"></el-table-column>
+      <el-table-column prop="appointmentPhone"
+                       label="联系方式"></el-table-column>
+      <el-table-column prop="remark"
+                       label="备注"></el-table-column>
+      <el-table-column fixed="right"
+                       label="操作"
+                       align="center"
+                       width="120">
        <template slot-scope="scope">
-          <el-button
-            @click="handleCancel(scope.$index)"
+          <el-button @click="handleCancel(scope.$index)"
                     type="text"
-            size="small"
-            >取消</el-button
-          >
+                     size="small">取消</el-button>
        </template>
      </el-table-column>
    </el-table>

-    <div class="m-hint" v-else>
-      <el-empty description="暂无内容" :image-size="200"></el-empty>
+    <div class="m-hint"
+         v-else>
+      <el-empty description="暂无内容"
+                :image-size="200"></el-empty>
    </div>
  </div>
 </template>
--- a/src/views/modules/communityService/dqfwzx/index.vue
+++ b/src/views/modules/communityService/dqfwzx/index.vue
@ -98,6 +98,7 @@
               :title="formTitle"
               width="850px"
               top="5vh"
+               class="dialog-h"
               @closed="handleClose">
      <edit-form ref="eleEditForm"
                 @dialogCancle="handleClose"
@ -111,6 +112,7 @@
               title="预约"
               width="850px"
               top="5vh"
+               class="dialog-h"
               @closed="handleCloseForm2">
      <order-form ref="eleOrderForm"
                  @dialogCancle="handleCloseForm2"
@ -124,6 +126,7 @@
               title="预约记录"
               width="850px"
               top="5vh"
+               class="dialog-h"
               @closed="handleCloseOrderList">
      <order-list ref="eleOrderList"
                  @dialogCancle="handleCloseOrderList"></order-list>