From c81e089be9108d7d26bda83d044b8799da4105f5 Mon Sep 17 00:00:00 2001
From: xuhuajiao <13476289682@163.com>
Date: Wed, 23 Mar 2022 10:49:26 +0800
Subject: [PATCH] =?UTF-8?q?=E8=AE=BE=E5=A4=87=E7=AE=A1=E7=90=86-=E4=BF=AE?=
 =?UTF-8?q?=E5=A4=8Dbug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/device/deviceConfig.vue | 218 +++++++++++++++++-------------
 1 file changed, 124 insertions(+), 94 deletions(-)

diff --git a/src/views/device/deviceConfig.vue b/src/views/device/deviceConfig.vue
index 2a51b9f..fc061b7 100644
--- a/src/views/device/deviceConfig.vue
+++ b/src/views/device/deviceConfig.vue
@@ -14,10 +14,12 @@
           </div>
         </el-col>
         <el-col class="page_add" :span="4">
-          <el-button class="table_add clear_btn" plain :disabled="clearBtnDisabled" @click="clearStartUp">清空</el-button>
+          <!-- @click="clearStartUp" -->
+          <el-button class="table_add clear_btn" plain :disabled="clearBtnDisabled">清空</el-button>
         </el-col>
       </el-row>
     </div>
+    <!-- 配置开关机列表 -->
     <el-row :gutter="15">
       <el-col>
         <el-table style="width: 100%;" :data="startUpList" :header-cell-style="{ background: '#3a8aeb', color: '#fff' }" @selection-change="handleSelectionChange">
@@ -31,9 +33,9 @@
             </template>
           </el-table-column>
           <el-table-column prop="period" label="配置周期" align="center" width="300">
-            <template slot-scope="{row}">    
-              <div>{{ row.open_setting==1? '每天 - 开机 '+row.open_time :'每周'+openWeekly(row.open_weekly)+'开机'+row.open_time }}</div>
-              <div>{{ row.close_setting==1?'每天 - 关机'+row.close_time :'每周'+closeWeekly(row.close_weekly)+'关机'+row.close_time }}</div>
+            <template slot-scope="{row}">
+              <div>{{ row.open_setting==1? '每天 - 开机 '+row.open_time :'每周'+setWeekly(row.open_weekly)+'开机'+row.open_time }}</div>
+              <div>{{ row.close_setting==1?'每天 - 关机'+row.close_time :'每周'+setWeekly(row.close_weekly)+'关机'+row.close_time }}</div>
             </template>
           </el-table-column>
           <el-table-column label="启动画面" align="center">
@@ -81,31 +83,24 @@
                     <el-radio :label="2" value="weekly">每周</el-radio>
                   </el-radio-group>
                 </el-form-item>
-                <!--  :rules="[
-                    { required: true, message: '请选择每周开机时间', trigger: 'change' },
-                  ]" -->
                 <el-form-item
                   v-if="form.open_setting === 2"
                   :class="{'weekly_margin': form.open_setting === 2}"
                   prop="open_weekly"
-                 
+                  :rules="[
+                    { required: true, message: '请选择每周开机时间', trigger: 'change' },
+                  ]"
                 >
-                  <el-checkbox-group v-model="open_weekly">
-                    <el-checkbox :label='1' name="open_weekly">周一</el-checkbox>
-                    <el-checkbox :label="2" name="open_weekly" >周二</el-checkbox>
-                    <el-checkbox :label="3" name="open_weekly" >周三</el-checkbox>
-                    <el-checkbox :label="4" name="open_weekly" >周四</el-checkbox>
-                    <el-checkbox :label="5" name="open_weekly" >周五</el-checkbox>
-                    <el-checkbox :label="6" name="open_weekly" >周六</el-checkbox>
-                    <el-checkbox :label="7" name="open_weekly" >周日</el-checkbox>
+                  <el-checkbox-group v-model="selectOpenWeekly">
+                    <el-checkbox v-for="item in weeklyList" :key="item.id" :label="item.id" :value="item.id" name="type">{{ item.name }}</el-checkbox>
                   </el-checkbox-group>
                 </el-form-item>
-               
+
                 <el-form-item
                   prop="open_time"
                   :rules="[
                     {type: 'string', required: true, message: '请选择具体开机时间', trigger: 'change' },
-                  ]" 
+                  ]"
                 >
                   <el-time-picker
                     v-model="form.open_time"
@@ -136,31 +131,24 @@
                     <el-radio :label="2" value="weekly">每周</el-radio>
                   </el-radio-group>
                 </el-form-item>
-               <!--  :rules="[
-                    {  required: true, message: '请选择每周关机时间', trigger: 'change' },
-                  ]" -->
                 <el-form-item
                   v-if="form.close_setting === 2"
                   :class="{'weekly_margin': form.close_setting === 2}"
                   prop="close_weekly"
-                 
+                  :rules="[
+                    { required: true, message: '请选择每周关机时间', trigger: 'change' },
+                  ]"
                 >
-                  <el-checkbox-group v-model="close_weekly">
-                    <el-checkbox :label="1" name="close_weekly">周一</el-checkbox>
-                    <el-checkbox :label="2" name="close_weekly" >周二</el-checkbox>
-                    <el-checkbox :label="3" name="close_weekly" >周三</el-checkbox>
-                    <el-checkbox :label="4" name="close_weekly" >周四</el-checkbox>
-                    <el-checkbox :label="5" name="close_weekly" >周五</el-checkbox>
-                    <el-checkbox :label="6" name="close_weekly" >周六</el-checkbox>
-                    <el-checkbox :label="7" name="close_weekly" >周日</el-checkbox>
+                  <el-checkbox-group v-model="selectCloseweekly">
+                    <el-checkbox v-for="item in weeklyList" :key="item.id" :label="item.id" :value="item.id" name="type">{{ item.name }}</el-checkbox>
                   </el-checkbox-group>
                 </el-form-item>
-                 
+
                 <el-form-item
                   prop="close_time"
-                 :rules="[
+                  :rules="[
                     {type: 'string', required: true, message: '请选择具体关机时间', trigger: 'change' },
-                  ]" 
+                  ]"
                 >
                   <el-time-picker
                     v-model="form.close_time"
@@ -179,13 +167,13 @@
             <div class="setting_cont">
               <span>设备方向：</span>
               <el-form-item
-                prop="device_direction"
+                prop="device_direction_name"
                 :rules="[
                   { required: true, message: '请选择具体设备方向', trigger: 'change' },
                 ]"
               >
-                <el-select v-model="form.device_direction" size="small" class="filter-item">
-                  <el-option v-for="item in deviceData" :key="item.key" :label="item.name" :value="item.key" />
+                <el-select v-model="form.device_direction_name" size="small" class="filter-item" value-key="name" @change="selectDirection">
+                  <el-option v-for="item in deviceData" :key="item.key" :label="item.name" :value="item" />
                 </el-select>
               </el-form-item>
             </div>
@@ -249,7 +237,8 @@ export default {
       // 开关机列表的数据
       startUpList: [],
       form: {
-        device_direction:null,
+        device_direction: null,
+        device_direction_name: null,
         device_id: '',
         open_setting: null, // 开机状态的每天和每周
         close_setting: null, // 关机状态的每天和每周
@@ -259,39 +248,61 @@ export default {
         open_weekly: [],
         close_weekly: []
       },
-      open_weekly: [],
-      close_weekly: [],
+      selectOpenWeekly: [], // 选中的开机每周状态
+      selectCloseweekly: [], // 选中的关机机每周状态
       addFromVisible: false,
       selectedList: [],
       clearBtnDisabled: true,
-      deviceData: [{ key: '1', name: '竖屏' }, { key: '2', name: '横屏' }]
+      deviceData: [{ key: '1', name: '竖屏' }, { key: '2', name: '横屏' }],
+      weeklyList: [
+        {
+          id: '1',
+          name: '周一'
+        },
+        {
+          id: '2',
+          name: '周二'
+        },
+        {
+          id: '3',
+          name: '周三'
+        },
+        {
+          id: '4',
+          name: '周四'
+        },
+        {
+          id: '5',
+          name: '周五'
+        },
+        {
+          id: '6',
+          name: '周六'
+        },
+        {
+          id: '7',
+          name: '周七'
+        }
+      ]
     }
   },
   computed: {
     // 将字符串渲染成汉字显示到页面
-    openWeekly(){
-      const a ={
-        1:'一',
-        2:'二',
-        3:'三',
-        4:'四',
-        5:'五',
-        6:'六',
-        7:'七'
+    setWeekly() {
+      const a = {
+        1: '一',
+        2: '二',
+        3: '三',
+        4: '四',
+        5: '五',
+        6: '六',
+        7: '七'
       }
-     return(str)=>str.split(',').map(i=>a[i]).join('/')
-    },
-    closeWeekly(){
-      const a ={
-        1:'一',
-        2:'二',
-        3:'三',
-        4:'四',
-        5:'五',
-        6:'六',
-        7:'七'
+      return function(str) {
+        if (str) {
+          return str.split(',').map(i => a[i]).join('/')
+        }
       }
-     return(str)=>str.split(',').map(i=>a[i]).join('/')
     }
   },
   watch: {},
@@ -310,24 +321,33 @@ export default {
         }
       })
     },
-    // 编辑
+    // 编辑开关机
     editFormData(row) {
-      this.$nextTick(()=>{
-        console.log(this.$refs.childUpload)
-        // this.$refs.childUpload.imageUrl=this.form.startup_screen
-      })
-      console.log(this.form.startup_screen)
       this.addFromVisible = true
-      this.form.device_id=row.device_id
-      this.form.open_setting=row.open_setting
-      this.form.close_setting=row.close_setting
-      this.form.open_time=row.open_time
-      this.form.close_time=row.close_time
-      this.form.startup_screen=row.startup_screen
-      this.form.open_weekly=row.open_weekly
-      this.form.close_weekly=row.close_weekly
-      this.form.device_direction=row.device_direction==1?'竖屏':'横屏'
+      this.form.device_id = row.device_id
+      this.form.open_setting = row.open_setting
+      this.form.close_setting = row.close_setting
+      this.form.open_time = row.open_time
+      this.form.close_time = row.close_time
+      this.form.startup_screen = row.startup_screen
+      this.form.open_weekly = row.open_weekly
+      if (row.open_weekly) {
+        this.selectOpenWeekly = row.open_weekly.split(',')
+      }
+      console.log(this.form.open_weekly)
+      console.log(typeof this.form.open_weekly)
+      console.log(this.selectOpenWeekly)
+      this.form.close_weekly = row.close_weekly
+      if (row.close_weekly) {
+        this.selectCloseweekly = row.close_weekly.split(',')
+      }
+      this.form.device_direction_name = row.device_direction == 1 ? '竖屏' : '横屏'
+      this.form.device_direction = row.device_direction
+      this.$nextTick(() => {
+        this.$refs.childUpload.imageUrl = this.form.startup_screen
+      })
     },
+    // 每天/每周切换的情况下数据处理
     clearCheckbox() {
       if (this.form.open_setting === 1) {
         this.open_weekly = []
@@ -335,33 +355,42 @@ export default {
       }
       if (this.form.close_setting === 1) {
         this.close_weekly = []
-        this.form.close_weekly=null
+        this.form.close_weekly = null
       }
     },
+    // 选择设备方向处理
+    selectDirection(selVal) {
+      this.key = selVal.key
+      this.name = selVal.name
+      this.form.device_direction = selVal.key
+      this.form.device_direction_name = selVal.name
+    },
+    // 重置表单数据
     resetForm(formName) {
       this.addFromVisible = false
       this.$refs[formName].resetFields()
     },
+    // 提交表单数据
     submitForm(formName) {
       this.form.startup_screen = this.$refs.childUpload.imageUrl
       if (this.form.open_setting === 2) {
-        this.form.open_weekly = this.open_weekly.join(',')
+        this.form.open_weekly = this.selectOpenWeekly.join(',')
       }
-      if(this.form.close_setting ===2) {
-        this.form.close_weekly=this.close_weekly.join(',')
+      if (this.form.close_setting === 2) {
+        this.form.close_weekly = this.selectCloseweekly.join(',')
       }
       this.$refs[formName].validate(valid => {
         if (valid) {
           const params = {
-            close_setting:this.form.close_setting,
-            close_time:this.form.close_time,
-            close_weekly:this.form.close_weekly,
-            device_id:this.form.device_id,
-            open_setting:this.form.open_setting,
-            open_time:this.form.open_time,
-            open_weekly:this.form.open_weekly,
-            device_direction:this.form.device_direction,
-            startup_screen:this.form.startup_screen
+            close_setting: this.form.close_setting,
+            close_time: this.form.close_time,
+            close_weekly: this.form.close_weekly,
+            device_id: this.form.device_id,
+            open_setting: this.form.open_setting,
+            open_time: this.form.open_time,
+            open_weekly: this.form.open_weekly,
+            device_direction: this.form.device_direction,
+            startup_screen: this.form.startup_screen
           }
           console.log(params)
           reqEditStartUp(params).then(res => {
@@ -380,10 +409,10 @@ export default {
         }
       })
     },
-    handleAvatarSuccess(res, file) {
-      this.form.startup_screen = res.data
-    },
-
+    // handleAvatarSuccess(res, file) {
+    //   this.form.startup_screen = res.data
+    // },
+    // 列表多选操作 - 清空btn状态
     handleSelectionChange(val) {
       this.selectedList = val
       if (val.length > 0) {
@@ -396,6 +425,7 @@ export default {
   }
 }
 </script>
+
 <style lang="scss" scoped>
 .setting_btn{
   margin-right: 10px;
@@ -466,7 +496,7 @@ export default {
   }
   .avatar-uploader-icon {
     font-size: 28px;
-      color: #8c939d;
+    color: #8c939d;
     width: 178px;
     height: 178px;
     line-height: 178px;