From 931e45f5f78494c7af4cab75053da49b57f22fbe Mon Sep 17 00:00:00 2001
From: rk <94314517@qq.com>
Date: 星期一, 13 十月 2025 14:31:43 +0800
Subject: [PATCH] 定时自动叫号 与 WMS获取车辆是否在园接口开发

---
 admin/src/components/operation/OperCarUseBookParamWindow.vue |  446 ++++++++++++++++++++++++++++++++++++++-----------------
 1 files changed, 304 insertions(+), 142 deletions(-)

diff --git a/admin/src/components/operation/OperCarUseBookParamWindow.vue b/admin/src/components/operation/OperCarUseBookParamWindow.vue
index 4aeb788..19c6d8b 100644
--- a/admin/src/components/operation/OperCarUseBookParamWindow.vue
+++ b/admin/src/components/operation/OperCarUseBookParamWindow.vue
@@ -1,120 +1,78 @@
 <template>
-  <GlobalWindow
-    :title="title"
-    width="1000px"
-    :visible.sync="visible"
-    :confirm-working="isWorking"
-    @confirm="confirm"
-  >
+  <GlobalWindow :title="title" width="1000px" :visible.sync="visible" :confirm-working="isWorking" @confirm="confirm">
     <div class="modal_wrap">
       <el-form :model="form" ref="formRef" class="el_form" :rules="rules">
         <el-form-item label="鐢ㄨ溅鑼冨洿" prop="type">
-          <el-radio v-model="form.type" style="width: 80px;" :label="0">甯傚唴鐢ㄨ溅</el-radio>
-          <el-radio v-model="form.type" style="width: 80px;" :label="1">甯傚鐢ㄨ溅</el-radio>
+          <el-radio v-model="form.type" @change="changeType" style="width: 80px" :label="0">甯傚唴鐢ㄨ溅</el-radio>
+          <el-radio v-model="form.type" @change="changeType" style="width: 80px" :label="1">甯傚鐢ㄨ溅</el-radio>
         </el-form-item>
         <el-form-item label="閫夋嫨杞﹁締" prop="carId">
-          <el-select v-model="form.carId" placeholder="閫夋嫨杞﹁締">
-            <el-option
-              v-for="item in carsList"
-              :key="item.id"
-              :label="item.code"
-              :value="item.id"
-            >
+          <el-select v-model="form.carId" @change="clearTime" placeholder="閫夋嫨杞﹁締">
+            <el-option v-for="item in carsList" :key="item.id" :label="item.code" :value="item.id">
             </el-option>
           </el-select>
         </el-form-item>
         <el-form-item label="鐢ㄨ溅鏃堕棿" prop="startTime">
-          <div
-            v-if="form.startTime && form.endTime"
-            class="sel_btn text"
-            @click="openTime"
-          >
+          <div v-if="form.startTime && form.endTime" class="sel_btn text" @click="openTime">
             {{ form.startTime }}-{{ form.endTime }}
           </div>
           <div v-else class="sel_btn" @click="openTime">閫夋嫨鏃堕棿</div>
         </el-form-item>
         <el-form-item label="棰勮鍑哄彂鏃堕棿" prop="planUseDate">
-          <el-date-picker
-            :disabled="!form.startTime"
-            v-model="form.planUseDate"
-            format="yyyy-MM-dd HH:mm:ss"
-            value-format="yyyy-MM-dd HH:mm:ss"
-            :picker-options="pickerOptions"
-            default-time="08:00:00"
-            type="datetime"
-            placeholder="閫夋嫨鏃ユ湡鏃堕棿"
-          >
-          </el-date-picker>
+          <el-date-picker v-if="form.type == '0'" :disabled="!form.startTime" v-model="form.planUseDate"
+            format="yyyy-MM-dd HH:mm" value-format="yyyy-MM-dd HH:mm" type="datetime" placeholder="閫夋嫨鏃ユ湡鏃堕棿" />
+          <el-date-picker v-if="form.type == '1'" :disabled="!form.startTime" v-model="form.planUseDate"
+            format="yyyy-MM-dd HH:mm" value-format="yyyy-MM-dd HH:mm" type="datetime" placeholder="閫夋嫨鏃ユ湡鏃堕棿" />
         </el-form-item>
         <el-form-item label="鐩殑鍦�" prop="addr">
           <el-input v-model="form.addr" placeholder="璇疯緭鍏ュ唴瀹�"></el-input>
         </el-form-item>
         <el-form-item label="涔樿溅浜哄憳" prop="memberIds">
-          <el-select
-            v-model="form.memberIds"
-            multiple
-            filterable
-            placeholder="璇烽�夋嫨"
-          >
-            <el-option
-              v-for="item in memberList"
-              :key="item.id"
-              :label="item.name"
-              :value="item.id"
-            >
+          <el-select v-model="form.memberIds" multiple filterable placeholder="璇烽�夋嫨">
+            <el-option v-for="item in memberList"
+                       :key="item.memberId" :value="item.memberId"
+                       :label="item.companyName ? `${item.realname}-${item.companyName}` : item.realname" >
             </el-option>
           </el-select>
         </el-form-item>
         <el-form-item label="鐢ㄨ溅浜嬬敱" prop="content">
-          <el-input
-            v-model="form.content"
-            type="textarea"
-            placeholder="璇疯緭鍏�"
-            :rows="4"
-          ></el-input>
+          <el-input v-model="form.content" type="textarea" placeholder="璇疯緭鍏�" :rows="4"></el-input>
         </el-form-item>
       </el-form>
       <div class="tip_wrap">
         <h1>娉ㄦ剰浜嬮」锛�</h1>
         <div>1銆佸叕鍙歌溅杈嗗鍑洪渶鍔炵悊鐢ㄨ溅鐢宠琛紝缁忔壒鍑嗗悗鏂瑰彲澶栧嚭锛堝�熷嚭锛夈��</div>
         <div>2銆佸競澶栫敤杞﹂渶棰嗗瀹℃牳銆�</div>
-        <div>3銆佸�熷嚭杞﹁締蹇呴』閬靛畧浜ら�氳鍒欙紝瀹夊叏琛岄┒銆傚浜庤溅杈嗗彂鐢熶氦閫氭剰澶栵紝瀵瑰綋浜嬩汉鍙婄涓夋柟閫犳垚浜鸿韩浼ゅ鍙婃崯澶憋紝鍏徃鍙互鍗忓姪澶勭悊淇濋櫓鍏徃璧斿伩鐩稿叧浜嬪疁锛屼絾涓嶆壙鎷呬换浣曡矗浠诲拰璐圭敤銆�</div>
-        <div>4銆佸叕鍙稿�熺粰鐢宠浜虹敤杞︼紝鐢宠鍊熻溅浜轰负绗竴璐ｄ换浜猴紝涓嶅厑璁歌浆鍊熺粰鍏朵粬浜轰娇鐢紝鑻ヨ鍊熺粰浠栦汉浣跨敤銆傝矗浠讳汉瑕佹壙鎷呭叏閮ㄨ矗浠汇��</div>
+        <!-- <div>
+          3銆佸�熷嚭杞﹁締蹇呴』閬靛畧浜ら�氳鍒欙紝瀹夊叏琛岄┒銆傚浜庤溅杈嗗彂鐢熶氦閫氭剰澶栵紝瀵瑰綋浜嬩汉鍙婄涓夋柟閫犳垚浜鸿韩浼ゅ鍙婃崯澶憋紝鍏徃鍙互鍗忓姪澶勭悊淇濋櫓鍏徃璧斿伩鐩稿叧浜嬪疁锛屼絾涓嶆壙鎷呬换浣曡矗浠诲拰璐圭敤銆�
+        </div>
+        <div>
+          4銆佸叕鍙稿�熺粰鐢宠浜虹敤杞︼紝鐢宠鍊熻溅浜轰负绗竴璐ｄ换浜猴紝涓嶅厑璁歌浆鍊熺粰鍏朵粬浜轰娇鐢紝鑻ヨ鍊熺粰浠栦汉浣跨敤銆傝矗浠讳汉瑕佹壙鎷呭叏閮ㄨ矗浠汇��
+        </div> -->
       </div>
     </div>
 
     <!-- 甯傚唴 -->
-    <el-dialog
-      title="閫夋嫨鐢ㄨ溅鏃堕棿"
-      :visible.sync="isShowTime"
-      append-to-body
-      width="600px"
-    >
+    <el-dialog title="閫夋嫨鐢ㄨ溅鏃堕棿" :visible.sync="isShowTime" append-to-body width="640px">
       <el-form :model="form" ref="modalRef" class="el_form" :rules="rules">
         <el-form-item label="鐢ㄨ溅鏃ユ湡" prop="dateDay">
-          <el-date-picker
-            v-model="form.dateDay"
-            value-format="yyyy-MM-dd"
-            type="date"
-            placeholder="閫夋嫨鏃ユ湡"
-            @change="seletedDate"
-          >
+          <el-date-picker v-model="form.dateDay" value-format="yyyy-MM-dd" type="date" placeholder="閫夋嫨鏃ユ湡"
+            :picker-options="{
+              disabledDate(time) {
+                return time.getTime() < Date.now() - 8.64e7 * 7;
+              },
+            }" @change="seletedDate">
           </el-date-picker>
         </el-form-item>
         <el-form-item label="鐢ㄨ溅鏃堕棿" prop="dateDay">
           <div>
             <div class="time_list">
-              <div
-                class="item"
-                :class="{
-                  disable: item.isUse == 1,
-                  active: item.checked == '1',
-                }"
-                @click="datetimeClick(item, i)"
-                v-for="(item, i) in timeList"
-                :key="i"
-              >
-                {{ item.startHours }}-{{ item.endHours }}
+              <div class="item" :class="{
+                disable: item.pastFlag,
+                active: item.checked == '1',
+                hasSub: item.carUseBookId,
+              }" @click="datetimeClick(item, i)" v-for="(item, i) in timeList" :key="i">
+                {{ item.startHours }} - {{ item.endHours }}
               </div>
             </div>
           </div>
@@ -127,54 +85,41 @@
         </div>
       </div>
       <span slot="footer" class="dialog-footer">
-        <div>宸查�夋嫨锛歿{ selDatetime }}</div>
+        <div style="text-align: left;">
+          <div>宸查�夋嫨锛歿{ selDatetime }}</div>
+          <div class="red">{{ selPastDatetime }}</div>
+        </div>
         <div class="btn" @click="subTime">纭鏃堕棿</div>
       </span>
     </el-dialog>
     <!-- 甯傚 -->
-    <el-dialog
-      title="閫夋嫨鐢ㄨ溅鏃堕棿"
-      :visible.sync="isShowShiwai"
-      append-to-body
-      width="600px"
-    >
+    <el-dialog title="閫夋嫨鐢ㄨ溅鏃堕棿" :visible.sync="isShowShiwai" append-to-body width="600px" :before-close="clearTime">
       <el-form :model="form" ref="modalRef" class="el_form" :rules="rules">
         <el-form-item label="鐢ㄨ溅寮�濮嬫椂闂�" prop="startTime">
-          <el-date-picker
-            v-model="form.startTime"
-            format="yyyy-MM-dd HH:mm"
-            value-format="yyyy-MM-dd HH:mm:ss"
-            type="datetime"
-            :picker-options="pickerOptions"
-            default-time="08:00:00"
-            @change="seletedShiwaiDate"
-          >
+          <el-date-picker v-model="form.startTime" format="yyyy-MM-dd HH:mm" value-format="yyyy-MM-dd HH:mm"
+            type="datetime" :default-time="defaultTime" :picker-options="pickerOptionsNow"
+            @change="seletedShiwaiDate(1)">
           </el-date-picker>
         </el-form-item>
         <el-form-item label="鐢ㄨ溅缁撴潫鏃堕棿" prop="endTime">
-          <el-date-picker
-            v-model="form.endTime"
-            format="yyyy-MM-dd HH:mm"
-            value-format="yyyy-MM-dd HH:mm:ss"
-            type="datetime"
-            :picker-options="pickerOptions"
-            default-time="08:00:00"
-            @change="seletedShiwaiDate"
-          >
+          <el-date-picker v-model="form.endTime" format="yyyy-MM-dd HH:mm" value-format="yyyy-MM-dd HH:mm"
+            type="datetime" :default-time="defaultTime" :picker-options="pickerOptions" @change="seletedShiwaiDate">
           </el-date-picker>
         </el-form-item>
       </el-form>
       <div class="have_info" v-if="info && info.length > 0">
         <div class="tit">鎮ㄧ敵璇风殑鐢ㄨ溅鏃舵宸叉湁杞﹁締棰勭害</div>
         <div class="content" v-for="(item, i) in info" :key="i">
-          <div class="card">{{ item.carCode }}</div>
+          <div class="df_sb">
+            <span class="card" v-if="item.carCode">{{ item.carCode }}</span>
+            <span>{{ i + 1 }}/{{ info.length }}</span>
+          </div>
           <div class="line">
             <span>鐢ㄨ溅鏃舵</span>
             <span>
               {{ item.startTime.slice(5, 16) }}鑷硔{
                 item.endTime.slice(5, 16)
-              }}</span
-            >
+              }}</span>
           </div>
           <div class="line">
             <span>鐩殑鍦�</span>
@@ -185,20 +130,52 @@
             <span>{{ item.memberIds.split(",").length }}浜�</span>
           </div>
           <div class="line">
-            <text>鐢ㄨ溅浜嬬敱</text>
-            <text>{{ item.content }}</text>
+            <span>鐢ㄨ溅浜嬬敱</span>
+            <span>{{ item.content }}</span>
           </div>
           <div class="line">
             <span>鐢宠浜�</span>
-            <span>{{ item.memberName }} {{ item.memberMobile }}</span>
+            <span>{{ item.memberName }} <span class="primaryColor">{{ item.memberMobile }}</span></span>
           </div>
         </div>
       </div>
 
       <span slot="footer" class="dialog-footer">
-        <div>宸查�夋嫨锛歿{ selDatetime }}</div>
-        <div class="btn" @click="subTime">纭鏃堕棿</div>
+        <div style="text-align: left;">
+          <div>宸查�夋嫨锛歿{ selDatetime }}</div>
+          <div class="red">{{ selPastDatetime }}</div>
+        </div>
+        <div class="btn" :class="{ disable: info && info.length > 0 }" @click="subTime">纭鏃堕棿</div>
       </span>
+    </el-dialog>
+    <!-- 璇︽儏 -->
+    <el-dialog title="閫夋嫨鐢ㄨ溅鏃堕棿" :visible.sync="isShowDetail" append-to-body width="600px">
+      <div class="detail_modal">
+        <div class="title">杞﹁締棰勭害鎯呭喌</div>
+        <div class="h1" v-if="activeInfo.carCode">{{ activeInfo.carCode }}</div>
+        <div class="line">
+          <div class="label">棰勮鐢ㄨ溅鏃舵</div>
+          <div class="value" v-if="activeInfo.startTime">{{ activeInfo.startTime.slice(5, 16) }} - {{
+            activeInfo.endTime.slice(5, 16) }}</div>
+        </div>
+        <div class="line">
+          <div class="label">鐩殑鍦�</div>
+          <div class="value">{{ activeInfo.addr }}</div>
+        </div>
+        <div class="line">
+          <div class="label">涔樿溅浜烘暟</div>
+          <div class="value" v-if="activeInfo.memberIds">{{ activeInfo.memberIds.split(',').length }}浜�</div>
+        </div>
+        <div class="line">
+          <div class="label">鐢ㄨ溅浜嬬敱</div>
+          <div class="value">{{ activeInfo.content || '' }}</div>
+        </div>
+        <div class="line">
+          <div class="label">鐢宠浜�</div>
+          <div class="value">{{ activeInfo.memberName }} <span class="primaryColor ml12">{{ activeInfo.memberPhone
+              }}</span></div>
+        </div>
+      </div>
     </el-dialog>
   </GlobalWindow>
 </template>
@@ -208,8 +185,11 @@
 import GlobalWindow from '@/components/common/GlobalWindow'
 import { allList } from '@/api/business/member'
 import { allList as getCarList } from '@/api/business/cars'
-import { carCanReservationDate, carUseBookCraete, carUseBookList } from '@/api/business/carUseBook'
+import { carCanReservationDate, carUseBookCraete, carUseBookList, detail } from '@/api/business/carUseBook'
 import { findTypeMemberInfo } from '@/api/business/memberCard'
+import dayjs from 'dayjs'
+import { findAllList as userList } from '@/api/system/user'
+
 export default {
   name: 'OperCarUseBookParamWindow',
   extends: BaseOpera,
@@ -222,7 +202,9 @@
 
       memberList: [],
       timeList: [],
+      defaultTime: dayjs().format('HH:mm:ss'),
       selDatetime: '',
+      selPastDatetime: '',
       colorOptions: [
         { color: this.$store.state.primaryColor, name: '宸查�夋嫨' },
         { color: '#F7F7F7', name: '鍙绾�' },
@@ -233,18 +215,44 @@
       carsList: [],
       form: {
         type: 0,
+        startTime: '',
+        endTime: '',
         memberIds: []
       },
+      activeInfo: {},
+      isShowDetail: false,
+      carBookInfo: {},
       pickerOptions: {
         disabledDate: (time) => {
-          if (this.form.startTime && this.form.endTime) {
+          if (this.form.startTime) {
             const minTime = new Date(this.form.startTime).getTime() - 8.64e7
+            const maxTime = this.form.endTime ? new Date(this.form.endTime).getTime() : ''
             return (
+              // maxTime ? time.getTime() < minTime || time.getTime() > maxTime : time.getTime() < minTime
               time.getTime() < minTime
             )
           } else {
             return time.getTime() < Date.now() - 8.64e7
           }
+        }
+      },
+      pickerOptions2: {
+        disabledDate: (time) => {
+          if (this.form.startTime && this.form.endTime) {
+            const minTime = new Date(this.form.startTime).getTime()
+            const maxTime = new Date(this.form.endTime).getTime()
+            return (
+              time.getTime() < minTime - 8.64e7 || time.getTime() > maxTime
+            )
+          } else {
+            return time.getTime() < Date.now() - 8.64e7
+          }
+        },
+        selectableRange: '00:00:00 - 23:59:59'
+      },
+      pickerOptionsNow: {
+        disabledDate: (time) => {
+          return time.getTime() < Date.now() - 8.64e7 * 7
         }
       },
       // 楠岃瘉瑙勫垯
@@ -260,6 +268,21 @@
       }
     }
   },
+  computed: {
+
+  },
+  // watch: {
+  //   'form.planUseDate': {
+  //     handler (newValue, oldValue) {
+  //       if (newValue) {
+  //         this.$set(this.pickerOptions, 'selectableRange', this.form.startTime.slice(11, 16) + ' - ' + this.form.endTime.slice(11, 16))
+  //         // this.startPickerOptions = this.startPickerOptions
+  //       }
+  //     },
+  //     deep: true,
+  //     immediate: true
+  //   }
+  // },
   created () {
     this.initData()
   },
@@ -281,14 +304,17 @@
         const memberList = []
         form.memberIds.forEach(i => {
           this.memberList.forEach(item => {
-            if (i === item.id) {
+            if (i === item.memberId) {
               memberList.push(item)
             }
           })
         })
-        form.memberNames = memberList.map(i => i.name).join(',')
+        form.memberNames = memberList.map(i => i.realname).join(',')
         form.memberList = memberList
         form.memberIds = form.memberIds.join(',')
+        form.startTime = form.startTime + ':00'
+        form.planUseDate = form.planUseDate + ':00'
+        form.endTime = form.endTime + ':59'
         if (valid) {
           carUseBookCraete({
             ...form
@@ -305,29 +331,68 @@
         return this.$tip.error('璇峰厛閫夋嫨杞﹁締')
       }
       if (this.form.type === 0) {
+        this.$set(this.form, 'dateDay', '')
+        this.timeList = []
         this.isShowTime = true
       } else {
+        this.clearTime()
+        this.selDatetime = ''
         this.isShowShiwai = true
       }
     },
+    changeType () {
+      this.$set(this.form, 'startTime', '')
+      this.$set(this.form, 'endTime', '')
+      this.$set(this.form, 'planUseDate', '')
+      this.$nextTick(() => {
+        this.$refs.formRef.clearValidate()
+      })
+    },
+    clearTime () {
+      this.isShowShiwai = false
+      this.$set(this.form, 'startTime', '')
+      this.$set(this.form, 'endTime', '')
+      this.$nextTick(() => {
+        if (this.$refs.modalRef) {
+          this.$refs.modalRef.clearValidate()
+        }
+      })
+    },
     subTime () {
+      if (this.info && this.info.length > 0) return
       if (this.form.type === 0) {
         const selTimeList = this.timeList.filter(i => i.checked == '1')
         if (selTimeList.length === 0) {
           return this.$tip.error('璇峰厛閫夋嫨鐢ㄨ溅鏃堕棿娈�')
         }
-        this.$set(this.form, 'startTime', selTimeList[0].startTime)
-        this.$set(this.form, 'endTime', selTimeList[selTimeList.length - 1].endTime)
+        this.$set(this.form, 'startTime', selTimeList[0].startTime.slice(0, 16))
+        this.$set(this.form, 'endTime', selTimeList[selTimeList.length - 1].endTime.slice(0, 16))
         this.isShowTime = false
-        this.$set(this.form, 'planUseDate', null)
+        this.$set(this.form, 'planUseDate', selTimeList[0].startTime.slice(0, 16))
         this.$forceUpdate()
       } else {
         this.$refs.modalRef.validate((valid) => {
+          const { form } = this
+          if (new Date(form.startTime).getTime() > new Date(form.endTime).getTime()) {
+            return this.$tip.error('缁撴潫鏃堕棿搴斿ぇ浜庡紑濮嬫椂闂�')
+          }
+          this.$set(this.form, 'planUseDate', form.startTime)
+          this.$forceUpdate()
           this.isShowShiwai = false
         })
       }
+      console.log('form', this.form)
     },
     datetimeClick (item, index) {
+      if (item.carUseBookId) {
+        detail(
+          item.carUseBookId
+        ).then(res => {
+          this.activeInfo = res
+          this.isShowDetail = true
+        })
+        return
+      }
       if (item.isUse == '1') return
       const { timeList } = this
       const selTimeList = timeList.filter(i => i.checked == '1')
@@ -364,24 +429,42 @@
       // console.log('selTimeList', selTimeList);
       if (selTimeLists.length === 0) {
         this.selDatetime = ''
+        this.selPastDatetime = ''
       } else {
+        const pastList = selTimeLists.filter(i => i.pastFlag)
+        if (pastList.length > 0) {
+          this.selPastDatetime = '褰撳墠閫夋嫨鍖呭惈宸茬粡杩囧幓鏃堕棿锛岃纭鍚庡啀鎻愪氦锛�'
+        } else {
+          this.selPastDatetime = ''
+        }
         this.selDatetime = this.form.dateDay.slice(5) + ' ' + selTimeLists[0].startHours + '-' + selTimeLists[selTimeLists.length - 1].endHours
       }
     },
     seletedDate (e) {
       this.gettimes()
     },
-    seletedShiwaiDate () {
+    seletedShiwaiDate (str) {
       const { form } = this
+      if (str && str == 1) {
+        this.$set(this.form, 'endTime', '')
+      }
+
       if (form.startTime && form.endTime) {
-        this.selDatetime = form.startTime + '-' + form.endTime
+        this.selDatetime = form.startTime + ' - ' + form.endTime
+        if (new Date(form.startTime).getTime() < new Date().getTime()) {
+          this.selPastDatetime = '褰撳墠閫夋嫨鍖呭惈宸茬粡杩囧幓鏃堕棿锛岃纭鍚庡啀鎻愪氦锛�'
+        } else {
+          this.selPastDatetime = ''
+        }
         carUseBookList({
           carId: form.carId,
-          startTime: form.startTime,
-          endTime: form.endTime
+          startTime: form.startTime + ':00',
+          endTime: form.endTime + ':59'
         }).then(res => {
           this.info = res || []
         })
+      } else {
+        this.selPastDatetime = ''
       }
     },
     gettimes () {
@@ -392,6 +475,7 @@
       }).then(res => {
         this.timeList = res || []
         this.timeList.forEach((i, j) => {
+          i.pastFlag = new Date().getTime() > new Date(i.startTime).getTime()
           i.checked = '0',
           i.index = j
         })
@@ -399,15 +483,21 @@
     },
     initData () {
       getCarList({
-        type: 1
+        type: 0
       }).then(res => {
         this.carsList = res
       })
-      findTypeMemberInfo({
-        type: '2'
+      userList({ queryParam: this.filterText, querySpecial: 1, type: 2, companyType: 1, workStatus: 0 })
+        .then(res => {
+          this.memberList = res || []
+        })
+      /* findTypeMemberInfo({
+        type: '2',
+        companyType: 1,
+        querySpecial: 1
       }).then(res => {
         this.memberList = res || []
-      })
+      }) */
     }
   }
 }
@@ -415,14 +505,18 @@
 
 <style scoped lang="scss">
 @import "@/assets/style/variables.scss";
-div{
+
+div {
   box-sizing: border-box;
 }
+
 .modal_wrap {
   display: flex;
   padding: 20px 0;
+
   .el_form {
     flex: 1;
+
     .sel_btn {
       width: 100%;
       height: 32px;
@@ -436,50 +530,73 @@
       box-sizing: border-box;
       cursor: pointer;
     }
+
     .text {
       color: #606266;
     }
   }
+
   .tip_wrap {
     flex: 1;
     margin-left: 30px;
     padding: 0 30px;
-    h1{
+
+    h1 {
       margin-bottom: 20px;
     }
-    div{
+
+    div {
       line-height: 28px;
     }
   }
 }
+
 .time_list {
   display: flex;
-  justify-content: space-between;
   flex-wrap: wrap;
+
   .item {
-    width: 154px;
-    height: 32px;
-    line-height: 32px;
-    text-align: center;
-    background: #f7f7f7;
-    border-radius: 4px;
-    margin-bottom: 10px;
+    margin-right: 8px;
+    margin-bottom: 8px;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 14px;
+    width: 124px;
+    height: 36px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 5px;
+    color: #111;
+    border: #cccccc solid 1px;
+    cursor: pointer;
+  }
+
+  .disable {
+    color: #fff;
+    border-color: #cccccc;
+    background-color: #cccccc;
   }
   .active {
-    background-color: $primary-color;
+    border-color: $primary-color;
+    background-color: #f6f9fe;
+    color: $primary-color;
+  }
+  .hasSub {
+    border-color: #bed6f9;
+    background-color: #bed6f9;
     color: #fff;
   }
-  .disable {
-    background-color: #cccccc;
-    color: #999999;
-  }
 }
+
 .color_op {
   display: flex;
+
   .item {
     display: flex;
     align-items: center;
     margin-right: 10px;
+
     .box {
       margin-right: 4px;
       width: 16px;
@@ -487,10 +604,12 @@
     }
   }
 }
+
 .dialog-footer {
   display: flex;
   align-items: center;
   justify-content: space-between;
+
   .btn {
     height: 42px;
     line-height: 42px;
@@ -498,19 +617,28 @@
     color: #fff;
     width: 120px;
     text-align: center;
+    cursor: pointer;
+  }
+
+  .disable {
+    background: #cccccc;
   }
 }
+
 .have_info {
-  padding: 0 0 120px;
+  padding: 0 0 60px;
+
   .tit {
     color: #ed4545;
     margin: 20px 0 12px;
   }
+
   .content {
     background: #f7f7f7;
     border-radius: 8px;
     padding: 15px 15px 5px;
     margin-bottom: 10px;
+
     .card {
       margin-bottom: 15px;
       font-weight: 500;
@@ -519,14 +647,17 @@
       background: #f7f7f7;
       padding: 0;
     }
+
     .line {
       display: flex;
       margin-bottom: 10px;
-      text {
+
+      span {
         &:nth-of-type(1) {
           width: 80px;
           color: #888888;
         }
+
         &:nth-of-type(2) {
           flex: 1;
         }
@@ -534,4 +665,35 @@
     }
   }
 }
+
+.detail_modal {
+  padding: 20px 15px;
+
+  .title {
+    text-align: center;
+    font-weight: 600;
+    font-size: 16px;
+    margin-bottom: 20px;
+  }
+
+  .h1 {
+    font-weight: 600;
+    font-size: 16px;
+    margin-bottom: 16px;
+  }
+
+  .line {
+    display: flex;
+    margin-bottom: 10px;
+
+    .label {
+      width: 120px;
+      color: #888888;
+    }
+
+    .value {
+      color: #333333;
+    }
+  }
+}
 </style>

--
Gitblit v1.9.3