调整样式，搜索条件可清空

fhKeeper/formulahousekeeper/timesheet/src/views/leave/list.vue

@@ -97,7 +97,7 @@
                 </el-form-item>
                 <!-- 备注 -->
                 <el-form-item label="备注" style="width: 100%">
-                    <el-input type="textarea" v-model="addForm.remark" :rows="5" style="width: 39%" maxlength="100" show-word-limit></el-input>
+                    <el-input type="textarea" v-model="addForm.remark" :rows="5" style="width: 550px" maxlength="100" show-word-limit></el-input>
                 </el-form-item>
             </el-form>
 
@@ -113,15 +113,15 @@
         <div class="ctons">
           <div class="flex">
             <div>
-              <el-select v-model="ownerIds" placeholder="请选择请假人" @change="chufas()" style="width: 180px" :disabled="user.role == 0" filterable="true">
+              <el-select v-model="ownerIds" placeholder="请选择请假人" clearable @change="chufas()" style="width: 180px" size="small" :disabled="user.role == 0" filterable="true">
                   <span v-for="(item, index) in users" :key="index">
                   <el-option :label="item.name" :value="item.id"></el-option>
                   </span> 
               </el-select>
             </div>
             <div>
-              <span>请假类型</span>
-              <el-select v-model="type" placeholder="请选择请假类型" @change="chufas()" style="width: 180px" filterable="true">
+              <span style="color: #606266">请假类型</span>
+              <el-select v-model="type" placeholder="请选择请假类型" clearable @change="chufas()" style="width: 180px;" size="small" filterable="true">
                   <span v-for="(item, index) in typess" :key="index">
                   <el-option :label="item.name" :value="item.id"></el-option>
                   </span> 
@@ -129,21 +129,21 @@
               
             </div>
             <div>
-              <span>请假状态</span>
-              <el-select v-if="falg == 0" v-model="code" placeholder="请选择请假状态" @change="chufas()" style="width: 180px" filterable="true">
+              <span style="color: #606266">请假状态</span>
+              <el-select v-if="falg == 0" v-model="code" placeholder="请选择请假状态" clearable @change="chufas()" size="small" style="width: 180px" filterable="true">
                   <span v-for="(item, index) in statuss" :key="index">
                   <el-option :label="item.name" :value="item.id"></el-option>
                   </span> 
               </el-select>
-              <el-select v-if="falg == 1" disabled v-model="code" placeholder="请选择请假类型" @change="chufas()" style="width: 180px" filterable="true">
+              <el-select v-if="falg == 1" disabled v-model="code" placeholder="请选择请假类型" clearable @change="chufas()" size="small" style="width: 180px" filterable="true">
                   <span v-for="(item, index) in statuss" :key="index">
                   <el-option :label="item.name" :value="item.id"></el-option>
                   </span> 
               </el-select>
             </div>
             <div>
-              <span>请假时间</span>
-              <el-date-picker v-model="createDate" type="date" @change="chufas()" :value-format = "YYYY-MM-DD" placeholder="选择日期"> </el-date-picker>
+              <span style="color: #606266">请假时间</span>
+              <el-date-picker v-model="createDate" type="date" @change="chufas()" :value-format = "YYYY-MM-DD" placeholder="选择日期" size="small" clearable> </el-date-picker>
             </div>
           </div>
             <el-table v-loading="loading" :data="tableData" style="width: 100%" height="90%">
@@ -234,24 +234,34 @@
         <div class="ctons">
           <div style="display: flex;align-items: center;">
             <div style="display: inline-block;width: 350px">
-              <el-input style="float:left;" v-model="keyword" class="input-with-select" placeholder="请输入人员搜索" clearable="true">
-                  <el-button slot="append" @click="statistical" icon="el-icon-search"></el-button>
+              <el-input style="float:left;" v-model="keyword" class="input-with-select" placeholder="请输入人员搜索" clearable="true" size="small">
+                  <el-button slot="append" @click="statistical()" icon="el-icon-search"></el-button>
               </el-input>
             </div>
             <div style="display: inline-block;width: 340px">
-              <span style="display: inline-block;margin: 0 15px 0 20px">开始日期</span>
+              <span style="display: inline-block;margin: 0 15px 0 20px;color: rgb(96, 98, 102);">开始日期</span>
               <el-date-picker
                 v-model="statData"
                 type="date"
-                placeholder="选择日期" >
+                placeholder="选择日期"
+                size="small"
+                @change="statistical()"
+                clearable="false"
+                value-format="yyyy-MM-dd"
+                :picker-options="pickerOptionsStarts">
               </el-date-picker>
             </div>
             <div style="display: inline-block;width: 350px">
-              <span style="display: inline-block;margin: 0 15px 0 0">结束日期</span>
+              <span style="display: inline-block;margin: 0 15px 0 0;color: rgb(96, 98, 102);">结束日期</span>
               <el-date-picker
                 v-model="endData"
                 type="date"
-                placeholder="选择日期">
+                placeholder="选择日期"
+                size="small"
+                @change="statistical()"
+                clearable="fasle"
+                value-format="yyyy-MM-dd"
+                :picker-options="pickerOptionsEnds">
               </el-date-picker>
             </div>
           </div>
@@ -415,6 +425,22 @@ export default {
           return time.getTime() <= new Date(this.createDate).getTime() - 86400000;
           },
       },
+      pickerOptionsStarts: {
+        disabledDate: (time) => {
+          if (this.endData) {
+            return time.getTime() > new Date(this.endData).getTime() || time.getTime() <= new Date(this.createDate).getTime() - 86400000;
+          }
+          return time.getTime() <= new Date(this.createDate).getTime() - 86400000;
+        },
+      },
+      pickerOptionsEnds: {
+        disabledDate: (time) => {
+          if (this.endData) {
+              return time.getTime() < new Date(this.endData).getTime();
+          }
+          return time.getTime() <= new Date(this.createDate).getTime() - 86400000;
+          },
+      },
       options: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'],
       tableData: [],
       page: 1,