From f9fd7c038b6405a69c5d070febebab0a59eb821b Mon Sep 17 00:00:00 2001
From: liukangdong <898885815@qq.com>
Date: 星期五, 25 十月 2024 18:00:42 +0800
Subject: [PATCH] ll

---
 admin/src/components/operation/OperCarUseBookParamWindow.vue |  638 ++++++++++++++++++++++++++++++++++++++++++++++++++++-----
 1 files changed, 579 insertions(+), 59 deletions(-)

diff --git a/admin/src/components/operation/OperCarUseBookParamWindow.vue b/admin/src/components/operation/OperCarUseBookParamWindow.vue
index ea7dd6a..980be80 100644
--- a/admin/src/components/operation/OperCarUseBookParamWindow.vue
+++ b/admin/src/components/operation/OperCarUseBookParamWindow.vue
@@ -7,39 +7,80 @@
     @confirm="confirm"
   >
     <div class="modal_wrap">
-      <el-form :model="form" ref="form" class="el_form" :rules="rules">
+      <el-form :model="form" ref="formRef" class="el_form" :rules="rules">
         <el-form-item label="鐢ㄨ溅鑼冨洿" prop="type">
-          <el-radio v-model="form.type" :label="0">瀹ゅ唴鐢ㄨ溅</el-radio>
-          <el-radio v-model="form.type" :label="1">瀹ゅ鐢ㄨ溅</el-radio>
+          <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-form-item>
         <el-form-item label="閫夋嫨杞﹁締" prop="carId">
-          <el-select v-model="form.carId" placeholder="閫夋嫨杞﹁締">
+          <el-select v-model="form.carId" @change="clearTime" placeholder="閫夋嫨杞﹁締">
             <el-option
               v-for="item in carsList"
-              :key="item.carId"
-              :label="item.carCode"
-              :value="item.carId"
+              :key="item.id"
+              :label="item.code"
+              :value="item.id"
             >
             </el-option>
           </el-select>
         </el-form-item>
-        <el-form-item label="鐢ㄨ溅鏃堕棿" prop="sortnum">
-          <div></div>
-          <div class="sel_btn" @click="openTime">閫夋嫨鏃堕棿</div>
+        <el-form-item label="鐢ㄨ溅鏃堕棿" prop="startTime">
+          <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="sortnum">
+        <el-form-item label="棰勮鍑哄彂鏃堕棿" prop="planUseDate">
           <el-date-picker
-            v-model="form.a"
+            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:ss"
+            :picker-options="pickerOptions"
+            default-time="08:00:00"
             type="datetime"
             placeholder="閫夋嫨鏃ユ湡鏃堕棿"
-          >
-          </el-date-picker>
+          />
+          <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:ss"
+            :picker-options="pickerOptions2"
+            default-time="08:00:00"
+            type="datetime"
+            placeholder="閫夋嫨鏃ユ湡鏃堕棿"
+          />
         </el-form-item>
-        <el-form-item label="鐩殑鍦�" prop="sortnum">
+        <el-form-item label="鐩殑鍦�" prop="addr">
           <el-input v-model="form.addr" placeholder="璇疯緭鍏ュ唴瀹�"></el-input>
         </el-form-item>
-        <el-form-item label="涔樿溅浜哄憳" prop="sortnum"> </el-form-item>
-        <el-form-item label="鐢ㄨ溅浜嬬敱" prop="sortnum">
+        <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-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="鐢ㄨ溅浜嬬敱" prop="content">
           <el-input
             v-model="form.content"
             type="textarea"
@@ -48,22 +89,38 @@
           ></el-input>
         </el-form-item>
       </el-form>
-      <div class="tip_wrap">111</div>
+      <div class="tip_wrap">
+        <h1>娉ㄦ剰浜嬮」锛�</h1>
+        <div>1銆佸叕鍙歌溅杈嗗鍑洪渶鍔炵悊鐢ㄨ溅鐢宠琛紝缁忔壒鍑嗗悗鏂瑰彲澶栧嚭锛堝�熷嚭锛夈��</div>
+        <div>2銆佸競澶栫敤杞﹂渶棰嗗瀹℃牳銆�</div>
+        <div>
+          3銆佸�熷嚭杞﹁締蹇呴』閬靛畧浜ら�氳鍒欙紝瀹夊叏琛岄┒銆傚浜庤溅杈嗗彂鐢熶氦閫氭剰澶栵紝瀵瑰綋浜嬩汉鍙婄涓夋柟閫犳垚浜鸿韩浼ゅ鍙婃崯澶憋紝鍏徃鍙互鍗忓姪澶勭悊淇濋櫓鍏徃璧斿伩鐩稿叧浜嬪疁锛屼絾涓嶆壙鎷呬换浣曡矗浠诲拰璐圭敤銆�
+        </div>
+        <div>
+          4銆佸叕鍙稿�熺粰鐢宠浜虹敤杞︼紝鐢宠鍊熻溅浜轰负绗竴璐ｄ换浜猴紝涓嶅厑璁歌浆鍊熺粰鍏朵粬浜轰娇鐢紝鑻ヨ鍊熺粰浠栦汉浣跨敤銆傝矗浠讳汉瑕佹壙鎷呭叏閮ㄨ矗浠汇��
+        </div>
+      </div>
     </div>
 
+    <!-- 甯傚唴 -->
     <el-dialog
       title="閫夋嫨鐢ㄨ溅鏃堕棿"
       :visible.sync="isShowTime"
       append-to-body
-      width="600px"
+      width="640px"
     >
-      <el-form :model="form" ref="form" class="el_form" :rules="rules">
+      <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="閫夋嫨鏃ユ湡"
+            :picker-options="{
+              disabledDate(time) {
+                return time.getTime() < Date.now() - 8.64e7;
+              },
+            }"
             @change="seletedDate"
           >
           </el-date-picker>
@@ -76,17 +133,134 @@
                 :class="{
                   disable: item.isUse == 1,
                   active: item.checked == '1',
+                  hasSub: item.carUseBookId,
                 }"
                 @click="datetimeClick(item, i)"
                 v-for="(item, i) in timeList"
                 :key="i"
-                >{{ item.startHours }}-{{ item.endHours }}</div
               >
+                {{ item.startHours }} - {{ item.endHours }}
+              </div>
             </div>
           </div>
         </el-form-item>
       </el-form>
+      <div class="color_op">
+        <div class="item" v-for="item in colorOptions" :key="item.name">
+          <div class="box" :style="{ background: item.color }"></div>
+          <div class="">{{ item.name }}</div>
+        </div>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <div>宸查�夋嫨锛歿{ selDatetime }}</div>
+        <div class="btn" @click="subTime">纭鏃堕棿</div>
+      </span>
     </el-dialog>
+    <!-- 甯傚 -->
+    <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:ss"
+            value-format="yyyy-MM-dd HH:mm:ss"
+            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:ss"
+            value-format="yyyy-MM-dd HH:mm:ss"
+            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="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
+            >
+          </div>
+          <div class="line">
+            <span>鐩殑鍦�</span>
+            <span>{{ item.addr }}</span>
+          </div>
+          <div class="line">
+            <span>涔樿溅浜烘暟</span>
+            <span>{{ item.memberIds.split(",").length }}浜�</span>
+          </div>
+          <div class="line">
+            <span>鐢ㄨ溅浜嬬敱</span>
+            <span>{{ item.content }}</span>
+          </div>
+          <div class="line">
+            <span>鐢宠浜�</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" :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>
 
@@ -95,7 +269,10 @@
 import GlobalWindow from '@/components/common/GlobalWindow'
 import { allList } from '@/api/business/member'
 import { allList as getCarList } from '@/api/business/cars'
-import { carCanReservationDate } from '@/api/business/carUseBook'
+import { carCanReservationDate, carUseBookCraete, carUseBookList, detail } from '@/api/business/carUseBook'
+import { findTypeMemberInfo } from '@/api/business/memberCard'
+import dayjs from 'dayjs'
+
 export default {
   name: 'OperCarUseBookParamWindow',
   extends: BaseOpera,
@@ -104,19 +281,88 @@
     return {
       // 琛ㄥ崟鏁版嵁
       isShowTime: false,
+      isShowShiwai: false,
 
       memberList: [],
       timeList: [],
+      defaultTime: dayjs().format('HH:mm:ss'),
+      selDatetime: '',
+      colorOptions: [
+        { color: this.$store.state.primaryColor, name: '宸查�夋嫨' },
+        { color: '#F7F7F7', name: '鍙绾�' },
+        { color: '#cccccc', name: '涓嶅彲棰勭害' }
+      ],
+      info: [],
+
       carsList: [],
       form: {
-        type: 0
+        type: 0,
+        startTime: '',
+        endTime: '',
+        memberIds: []
+      },
+      activeInfo: {},
+      isShowDetail: false,
+      carBookInfo: {},
+      pickerOptions: {
+        disabledDate: (time) => {
+          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;
+        }
       },
       // 楠岃瘉瑙勫垯
       rules: {
-        name: [
-          { required: true, message: '璇疯緭鍏ュ悕绉�' }
-        ]
+        type: [{ required: true, message: '璇烽�夋嫨', trigger: 'change' }],
+        carId: [{ required: true, message: '璇烽�夋嫨', trigger: 'change' }],
+        startTime: [{ required: true, message: '璇烽�夋嫨', trigger: 'change' }],
+        endTime: [{ required: true, message: '璇烽�夋嫨', trigger: 'change' }],
+        planUseDate: [{ required: true, message: '璇烽�夋嫨', trigger: 'change' }],
+        addr: [{ required: true, message: '璇疯緭鍏�', trigger: 'blur' }],
+        memberIds: [{ type: 'array', required: true, message: '璇烽�夋嫨', trigger: 'change' }],
+        content: [{ required: true, message: '璇疯緭鍏�', trigger: 'blur' }]
       }
+    }
+  },
+  computed: {
+
+  },
+  watch: {
+    'form.planUseDate': {
+      handler (newValue, oldValue) {
+        if (newValue) {
+          this.$set(this.pickerOptions, 'selectableRange', this.form.startTime.slice(11, 19) + ' - ' + this.form.endTime.slice(11, 19))
+          // this.startPickerOptions = this.startPickerOptions
+        }
+      },
+      deep: true,
+      immediate: true
     }
   },
   created () {
@@ -125,54 +371,193 @@
   methods: {
     open () {
       this.title = '鏂板缓鍏姟杞︾敤杞︾敵璇�'
+      this.form = {
+        type: 0,
+        memberIds: []
+      }
+      this.$nextTick(() => {
+        this.$refs.formRef.clearValidate()
+      })
       this.visible = true
     },
-    openTime () {
-      const { form } = this
-      if(!form.carId){
-        this.$tip.warning('璇峰厛閫夋嫨杞﹁締')
-      }
-      this.isShowTime = true
-    },
-    seletedDate (e) {
-      console.log(e)
-      const item = e.value[0]
-      this.$set(this.param, 'carCode', item.code)
-      this.$set(this.param, 'carId', item.id)
-      if (this.param.carId && this.param.queryDate) {
-        this.gettimes()
-      }
-      this.isShowCar = false
-    },
-    gettimes () {
-      const { param } = this
-      carCanReservationDate({
-        dateDay: param.queryDate,
-        carId: param.carId
-      }).then(res => {
-        if (res.code === 200) {
-          this.timeList = res.data || []
-          this.timeList.forEach((i, j) => {
-            i.checked = '0',
-            i.index = j
+    confirm () {
+      const form = JSON.parse(JSON.stringify(this.form))
+      this.$refs.formRef.validate((valid) => {
+        const memberList = []
+        form.memberIds.forEach(i => {
+          this.memberList.forEach(item => {
+            if (i === item.id) {
+              memberList.push(item)
+            }
+          })
+        })
+        form.memberNames = memberList.map(i => i.name).join(',')
+        form.memberList = memberList
+        form.memberIds = form.memberIds.join(',')
+        if (valid) {
+          carUseBookCraete({
+            ...form
+          }).then(res => {
+            this.visible = false
+            this.$emit('success')
           })
         }
       })
     },
+    openTime () {
+      const { form } = this
+      if (!form.carId) {
+        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
+      }
+    },
+    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.isShowTime = false
+        this.$set(this.form, 'planUseDate', null)
+        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.isShowShiwai = false
+        })
+      }
+    },
+    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')
+      if (selTimeList.length === 0) {
+        this.timeList.forEach((ite, i) => {
+          if (i === index) {
+            ite.checked = '1'
+            this.$forceUpdate()
+          }
+        })
+      } else {
+        const findIndex = selTimeList.findIndex(i => i.index === index)
+        console.log('findIndex', findIndex)
+        if (findIndex === -1) {
+          const startNum = index - selTimeList[0].index
+          const endNum = index - selTimeList[selTimeList.length - 1].index
+          if (startNum == 1 || startNum == -1 || endNum == 1 || endNum == -1) {
+            console.log('鐩搁偦')
+            item.checked = true
+            this.$forceUpdate()
+          } else {
+            return this.$tip.error('璇烽�夋嫨鐩搁偦鐨勬椂闂存')
+          }
+        } else {
+          if (index === selTimeList[0].index || index === selTimeList[selTimeList.length - 1].index) {
+            item.checked = false
+            this.$forceUpdate()
+          } else {
+            return this.$tip.error('璇峰厛鍙栨秷鏈�澶栧眰鐨勬椂闂存')
+          }
+        }
+      }
+      const selTimeLists = this.timeList.filter(i => i.checked == '1')
+      // console.log('selTimeList', selTimeList);
+      if (selTimeLists.length === 0) {
+        this.selDatetime = ''
+      } else {
+        this.selDatetime = this.form.dateDay.slice(5) + ' ' + selTimeLists[0].startHours + '-' + selTimeLists[selTimeLists.length - 1].endHours
+      }
+    },
+    seletedDate (e) {
+      this.gettimes()
+    },
+    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
+        carUseBookList({
+          carId: form.carId,
+          startTime: form.startTime,
+          endTime: form.endTime
+        }).then(res => {
+          this.info = res || []
+        })
+      }
+    },
+    gettimes () {
+      const { form } = this
+      carCanReservationDate({
+        dateDay: form.dateDay,
+        carId: form.carId
+      }).then(res => {
+        this.timeList = res || []
+        this.timeList.forEach((i, j) => {
+          i.checked = '0',
+          i.index = j
+        })
+      })
+    },
     initData () {
       getCarList({
-        type: 1
+        type: 0
       }).then(res => {
-        this.carsList = res.data || []
+        this.carsList = res
+      })
+      findTypeMemberInfo({
+        type: '2',
+        companyType: 1
+      }).then(res => {
+        this.memberList = res || []
       })
     }
   }
 }
 </script>
 
-<style lang="scss" scoped>
+<style scoped lang="scss">
+@import "@/assets/style/variables.scss";
+div {
+  box-sizing: border-box;
+}
 .modal_wrap {
   display: flex;
+  padding: 20px 0;
   .el_form {
     flex: 1;
     .sel_btn {
@@ -181,16 +566,151 @@
       border-radius: 4px;
       border: 1px solid #dcdfe6;
       margin-top: 32px;
-      text-align: right;
+      text-align: left;
+      padding-left: 12px;
       color: #999999;
       padding-right: 12px;
       box-sizing: border-box;
       cursor: pointer;
     }
+    .text {
+      color: #606266;
+    }
   }
   .tip_wrap {
-    width: 460px;
+    flex: 1;
     margin-left: 30px;
+    padding: 0 30px;
+    h1 {
+      margin-bottom: 20px;
+    }
+    div {
+      line-height: 28px;
+    }
+  } 
+}
+.time_list {
+  display: flex;
+  flex-wrap: wrap;
+  .item {
+    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;
+  }
+  .active {
+    border-color: $primary-color;
+    background-color: #f6f9fe;
+    color: $primary-color;
+  }
+  .disable {
+    color: #fff;
+    border-color: #cccccc;
+    background-color: #cccccc;
+  }
+  .hasSub {
+    border-color: #bed6f9;
+    background-color: #bed6f9;
+    color: #fff;
+    }
+}
+.color_op {
+  display: flex;
+  .item {
+    display: flex;
+    align-items: center;
+    margin-right: 10px;
+    .box {
+      margin-right: 4px;
+      width: 16px;
+      height: 16px;
+    }
+  }
+}
+.dialog-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  .btn {
+    height: 42px;
+    line-height: 42px;
+    background-color: $primary-color;
+    color: #fff;
+    width: 120px;
+    text-align: center;
+    cursor: pointer;
+  }
+  .disable{
+    background: #cccccc;
+  }
+}
+.have_info {
+  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;
+      font-size: 16px;
+      color: #222222;
+      background: #f7f7f7;
+      padding: 0;
+    }
+    .line {
+      display: flex;
+      margin-bottom: 10px;
+      span {
+        &:nth-of-type(1) {
+          width: 80px;
+          color: #888888;
+        }
+        &:nth-of-type(2) {
+          flex: 1;
+        }
+      }
+    }
+  }
+}
+.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