From afee0e312523a4a1e8339e21ef29973feff3eec3 Mon Sep 17 00:00:00 2001
From: xuhuajiao <13476289682@163.com>
Date: Thu, 24 Feb 2022 17:17:26 +0800
Subject: [PATCH] =?UTF-8?q?=E8=AE=BE=E5=A4=87=E7=AE=A1=E7=90=862?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/routers.js             |   4 +-
 src/views/device/config.vue       | 171 ----------------
 src/views/device/deviceConfig.vue | 319 ++++++++++++++++++++++++++++++
 3 files changed, 321 insertions(+), 173 deletions(-)
 delete mode 100644 src/views/device/config.vue
 create mode 100644 src/views/device/deviceConfig.vue

diff --git a/src/router/routers.js b/src/router/routers.js
index 0f818df..e40d204 100644
--- a/src/router/routers.js
+++ b/src/router/routers.js
@@ -133,8 +133,8 @@ export const constantRouterMap = [
       }
     },
     {
-      path: '/config',
-      component: () => import('@/views/device/config'),
+      path: '/deviceConfig',
+      component: () => import('@/views/device/deviceConfig'),
       meta: {
         title: '开关机配置',
         icon: 'edit'
diff --git a/src/views/device/config.vue b/src/views/device/config.vue
deleted file mode 100644
index a1449b4..0000000
--- a/src/views/device/config.vue
+++ /dev/null
@@ -1,171 +0,0 @@
-<template>
-  <div class="app-container">
-    <!-- 搜索栏 -->
-    <div class="head-container">
-      <el-row type="flex">
-        <el-col :span="20" class="col_flex">
-          <div class="form_item">
-            <span>设备ID</span>
-            <el-input v-model="query.blurry" clearable size="small" placeholder="请输入设备ID" style="width: 200px" class="filter-item" @keyup.enter.native="crud.toQuery" />
-          </div>
-          <div class="form_item">
-            <span>设备名称</span>
-            <el-input v-model="query.blurry" clearable size="small" placeholder="请输入设备名称" style="width: 200px" class="filter-item" @keyup.enter.native="crud.toQuery" />
-          </div>
-          <rrOperation />
-        </el-col>
-        <el-col class="page_add" :span="4">
-          <el-button class="setting_btn" type="primary" icon="el-icon-setting">配置</el-button>
-          <el-button class="table_add" type="primary" icon="el-icon-delete" disabled>清空</el-button>
-        </el-col>
-      </el-row>
-    </div>
-    <el-row :gutter="15">
-      <el-col>
-        <el-card class="box-card" shadow="never">
-          <el-table style="width: 100%;" :data="tableData">
-            <el-table-column :selectable="checkboxT" type="selection" width="55" />
-            <el-table-column prop="id" label="设备ID" align="center" />
-            <el-table-column prop="account" label="设备账号" align="center" />
-            <el-table-column prop="name" label="设备名称" align="center" />
-            <el-table-column prop="orientation" label="设备方向" align="center" />
-            <el-table-column prop="period" label="配置周期" align="center" width="300" />
-            <el-table-column prop="cover" label="启动画面" align="center">
-              <template slot-scope="scope">
-                <el-image class="cover_img" :src="scope.row.cover" />
-              </template>
-            </el-table-column>
-            <el-table-column prop="date" label="创建时间" align="center" width="200" />
-            <el-table-column fixed="right" label="操作" align="center">
-              <template slot-scope="scope">
-                <el-button type="primary" icon="el-icon-edit" @click="edit(scope.$index, scope.row)" />
-                <el-button type="info" icon="el-icon-info" />
-              </template>
-            </el-table-column>
-          </el-table>
-          <!--分页组件-->
-          <pagination />
-        </el-card>
-      </el-col>
-    </el-row>
-    <!-- 编辑设备 -->
-    <div class="layer">
-      <el-dialog title="配置" :close-on-click-modal="false" :visible.sync="addFromVisible" width="600px">
-        <el-form ref="form" inline="true" :model="form" :rules="rules" label-width="100px">
-          <el-form-item label="开机时间" prop="uptime">
-            <span>设置时间：</span>
-            <el-radio-group v-model="form.time">
-              <el-radio label="每天" />
-              <el-radio label="每周" />
-            </el-radio-group>
-            <!-- <el-form-item label="活动性质" prop="type">
-              <el-checkbox-group v-model="ruleForm.type">
-                <el-checkbox label="美食/餐厅线上活动" name="type" />
-                <el-checkbox label="地推活动" name="type" />
-                <el-checkbox label="线下主题活动" name="type" />
-                <el-checkbox label="单纯品牌曝光" name="type" />
-              </el-checkbox-group>
-            </el-form-item> -->
-            <el-checkbox-group v-model="form.week">
-              <el-checkbox label="周一" name="week" />
-              <el-checkbox label="周二" name="week" />
-              <el-checkbox label="周三" name="week" />
-              <el-checkbox label="周四" name="week" />
-              <el-checkbox label="周五" name="week" />
-              <el-checkbox label="周六" name="week" />
-              <el-checkbox label="周日" name="week" />
-            </el-checkbox-group>
-          </el-form-item>
-          <!-- el-form-item label="设备名称" prop="name"><el-input v-model="form.name" style="width: 200px" /></el-form-item>
-          <el-form-item label="设备方向" prop="orientation">
-            <el-select v-model="form.orientation" size="small" class="filter-item" style="width: 200px">
-              <el-option v-for="item in deviceData" :key="item.key" :label="item.name" :value="item.key" />
-            </el-select>
-          </el-form-item> -->
-        </el-form>
-        <div slot="footer" class="dialog-footer">
-          <el-button @click="addFromVisible = false">取 消</el-button>
-          <el-button type="primary" @click="submitForm('form')">确 定</el-button>
-        </div>
-      </el-dialog>
-    </div>
-  </div>
-</template>
-
-<script>
-import crudUser from '@/api/system/user'
-import CRUD, { presenter, header, form, crud } from '@crud/crud'
-import rrOperation from '@crud/RR.operation'
-import pagination from '@crud/Pagination'
-const defaultForm = {
-  time: null,
-  week: [],
-  orientation: null
-}
-export default {
-  name: 'DeviceConfig',
-  components: { rrOperation, pagination },
-  cruds() {
-    return CRUD({
-      title: '用户',
-      url: 'api/users',
-      crudMethod: { ...crudUser }
-    })
-  },
-  mixins: [presenter(), header(), form(defaultForm), crud()],
-  data() {
-    return {
-      addFromVisible: false,
-      tableData: [
-        {
-          id: 'XXXXXXXXX',
-          account: '13476289682',
-          name: 'GCXR2',
-          orientation: '竖屏',
-          period: '每周（一/二/三/四/五）- 开机 - 8:00-18:00',
-          cover: 'https://qiniu.aiyxlib.com/1636076789085.png',
-          date: '2021-09-14 16:35'
-        }
-      ],
-      stateData: [{ key: '0', name: '全部' }, { key: '1', name: '在线' }, { key: '2', name: '离线' }],
-      deviceData: [{ key: '0', name: '竖屏' }, { key: '1', name: '横屏' }],
-      rules: {
-        name: [{ required: true, message: '请输入设备名称', trigger: 'blur' }, { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }],
-        orientation: [{ required: true, message: '请选择设备方向', trigger: 'change' }]
-      }
-    }
-  },
-  computed: {},
-  watch: {},
-  methods: {
-    // 编辑
-    edit(index, row) {
-      this.addFromVisible = true
-      this.form.account = row.account
-      this.form.name = row.name
-    },
-    submitForm(formName) {
-      this.$refs[formName].validate(valid => {
-        if (valid) {
-          alert('submit!')
-        } else {
-          console.log('error submit!!')
-          return false
-        }
-      })
-    }
-  }
-}
-</script>
-<style lang="scss" scoped>
-.col_flex {
-  display: flex;
-}
-.setting_btn{
-  margin-right: 10px;
-}
-.cover_img{
-  width: 65px;
-}
-
-</style>
diff --git a/src/views/device/deviceConfig.vue b/src/views/device/deviceConfig.vue
new file mode 100644
index 0000000..41a4a4e
--- /dev/null
+++ b/src/views/device/deviceConfig.vue
@@ -0,0 +1,319 @@
+<template>
+  <div class="app-container">
+    <!-- 搜索栏 -->
+    <div class="head-container">
+      <el-row type="flex">
+        <el-col :span="20" class="col_flex">
+          <div class="form_item">
+            <span>设备ID</span>
+            <el-input v-model="query.blurry" clearable size="small" placeholder="请输入设备ID" style="width: 200px" class="filter-item" @keyup.enter.native="crud.toQuery" />
+          </div>
+          <div class="form_item">
+            <span>设备名称</span>
+            <el-input v-model="query.blurry" clearable size="small" placeholder="请输入设备名称" style="width: 200px" class="filter-item" @keyup.enter.native="crud.toQuery" />
+          </div>
+          <rrOperation />
+        </el-col>
+        <el-col class="page_add" :span="4">
+          <el-button class="setting_btn" type="primary" icon="el-icon-setting">配置</el-button>
+          <el-button class="table_add" type="primary" icon="el-icon-delete" :disabled="clearBtnDisabled">清空</el-button>
+        </el-col>
+      </el-row>
+    </div>
+    <el-row :gutter="15">
+      <el-col>
+        <el-card class="box-card" shadow="never">
+          <el-table style="width: 100%;" :data="tableData" @selection-change="handleSelectionChange">
+            <el-table-column type="selection" width="55" />
+            <el-table-column prop="id" label="设备ID" align="center" />
+            <el-table-column prop="account" label="设备账号" align="center" />
+            <el-table-column prop="name" label="设备名称" align="center" />
+            <el-table-column prop="orientation" label="设备方向" align="center" />
+            <el-table-column prop="period" label="配置周期" align="center" width="300" />
+            <el-table-column prop="cover" label="启动画面" align="center">
+              <template slot-scope="scope">
+                <el-image class="cover_img" :src="scope.row.cover" />
+              </template>
+            </el-table-column>
+            <el-table-column prop="date" label="创建时间" align="center" width="200" />
+            <el-table-column fixed="right" label="操作" align="center">
+              <template slot-scope="scope">
+                <el-button type="primary" icon="el-icon-edit" @click="edit(scope.$index, scope.row)" />
+                <el-button type="info" icon="el-icon-info" />
+              </template>
+            </el-table-column>
+          </el-table>
+          <!--分页组件-->
+          <pagination />
+        </el-card>
+      </el-col>
+    </el-row>
+    <!-- 编辑设备 -->
+    <div class="layer device_layer">
+      <el-dialog title="配置" :close-on-click-modal="false" :visible.sync="addFromVisible" width="700px">
+        <el-form ref="form" :model="form">
+          <div class="setting_item">
+            <h4>开机时间</h4>
+            <div class="setting_cont">
+              <span>设置时间：</span>
+              <div>
+                <el-form-item
+                  prop="ontime"
+                  :rules="[
+                    { required: true, message: '请选择开机时间', trigger: 'change' },
+                  ]"
+                  :class="{'no_margin': form.ontime === '每周'}"
+                >
+                  <el-radio-group v-model="form.ontime" @change="clearCheckbox()">
+                    <el-radio label="每天" value="everyday" />
+                    <el-radio label="每周" value="weekly" />
+                  </el-radio-group>
+                </el-form-item>
+                <el-form-item
+                  v-if="form.ontime === '每周'"
+                  :class="{'weekly_margin': form.ontime === '每周'}"
+                  prop="onweek"
+                  :rules="[
+                    { required: true, message: '请选择每周开机时间', trigger: 'change' },
+                  ]"
+                >
+                  <el-checkbox-group v-model="form.onweek">
+                    <el-checkbox label="周一" name="onweek" />
+                    <el-checkbox label="周二" name="onweek" />
+                    <el-checkbox label="周三" name="onweek" />
+                    <el-checkbox label="周四" name="onweek" />
+                    <el-checkbox label="周五" name="onweek" />
+                    <el-checkbox label="周六" name="onweek" />
+                    <el-checkbox label="周日" name="onweek" />
+                  </el-checkbox-group>
+                  </el-checkbox-groupv-model="form.onweek"></el-form-item>
+                <el-form-item
+                  prop="ontimeValue"
+                  :rules="[
+                    { type: 'date', required: true, message: '请选择具体开机时间', trigger: 'change' },
+                  ]"
+                >
+                  <el-time-picker
+                    v-model="form.ontimeValue"
+                    :picker-options="{
+                      selectableRange: '00:00:00 - 23:59:59'
+                    }"
+                    placeholder="任意时间点"
+                    value-format="HH:MM:SS"
+                  />
+                </el-form-item>
+              </div>
+            </div>
+          </div>
+          <div class="setting_item">
+            <h4>关机时间</h4>
+            <div class="setting_cont">
+              <span>设置时间：</span>
+              <div>
+                <el-form-item
+                  prop="offtime"
+                  :rules="[
+                    { required: true, message: '请选择关机时间', trigger: 'change' },
+                  ]"
+                  :class="{'no_margin': form.offtime === '每周'}"
+                >
+                  <el-radio-group v-model="form.offtime" @change="clearCheckbox()">
+                    <el-radio label="每天" value="everyday" />
+                    <el-radio label="每周" value="weekly" />
+                  </el-radio-group>
+                </el-form-item>
+                <el-form-item
+                  v-if="form.offtime === '每周'"
+                  :class="{'weekly_margin': form.offtime === '每周'}"
+                  prop="offweek"
+                  :rules="[
+                    { required: true, message: '请选择每周关机时间', trigger: 'change' },
+                  ]"
+                >
+                  <el-checkbox-group v-model="form.offweek">
+                    <el-checkbox label="周一" name="offweek" />
+                    <el-checkbox label="周二" name="offweek" />
+                    <el-checkbox label="周三" name="offweek" />
+                    <el-checkbox label="周四" name="offweek" />
+                    <el-checkbox label="周五" name="offweek" />
+                    <el-checkbox label="周六" name="offweek" />
+                    <el-checkbox label="周日" name="offweek" />
+                  </el-checkbox-group>
+                </el-form-item>
+                <el-form-item
+                  prop="offtimeValue"
+                  :rules="[
+                    { required: true, message: '请选择具体关机时间', trigger: 'change' },
+                  ]"
+                >
+                  <el-time-picker
+                    v-model="form.offtimeValue"
+                    :picker-options="{
+                      selectableRange: '00:00:00 - 23:59:59'
+                    }"
+                    placeholder="任意时间点"
+                    value-format="HH:MM:SS"
+                  />
+                </el-form-item>
+              </div>
+            </div>
+          </div>
+          <div class="setting_item">
+            <h4>设备方向</h4>
+            <div class="setting_cont">
+              <span>设备方向：</span>
+              <el-form-item
+                prop="orientation"
+                :rules="[
+                  { required: true, message: '请选择具体关机时间', trigger: 'change' },
+                ]"
+              >
+                <el-select v-model="form.orientation" size="small" class="filter-item" style="width: 220px">
+                  <el-option v-for="item in deviceData" :key="item.key" :label="item.name" :value="item.key" />
+                </el-select>
+              </el-form-item>
+            </div>
+          </div>
+          <div class="setting_item">
+            <h4>启动画面</h4>
+          </div>
+        </el-form>
+        <div slot="footer" class="dialog-footer">
+          <el-button @click="resetForm('form')">取 消</el-button>
+          <el-button type="primary" @click="submitForm('form')">确 定</el-button>
+        </div>
+      </el-dialog>
+    </div>
+  </div>
+</template>
+
+<script>
+import crudUser from '@/api/system/user'
+import CRUD, { presenter, header, form, crud } from '@crud/crud'
+import rrOperation from '@crud/RR.operation'
+import pagination from '@crud/Pagination'
+const defaultForm = {
+  ontime: null,
+  offtime: null,
+  onweek: [],
+  offweek: [],
+  orientation: null,
+  ontimeValue: '',
+  offtimeValue: ''
+}
+export default {
+  name: 'DeviceConfig',
+  components: { rrOperation, pagination },
+  cruds() {
+    return CRUD({
+      title: '用户',
+      url: 'api/users',
+      crudMethod: { ...crudUser }
+    })
+  },
+  mixins: [presenter(), header(), form(defaultForm), crud()],
+  data() {
+    return {
+      addFromVisible: false,
+      selectedList: [],
+      clearBtnDisabled: true,
+      tableData: [
+        {
+          id: 'XXXXXXXXX',
+          account: '13476289682',
+          name: 'GCXR2',
+          orientation: '竖屏',
+          period: '每周（一/二/三/四/五）- 开机 - 8:00-18:00',
+          cover: 'https://qiniu.aiyxlib.com/1636076789085.png',
+          date: '2021-09-14 16:35'
+        }
+      ],
+      deviceData: [{ key: '0', name: '竖屏' }, { key: '1', name: '横屏' }]
+    }
+  },
+  computed: {},
+  watch: {},
+  methods: {
+    // 编辑
+    edit(index, row) {
+      this.addFromVisible = true
+    },
+    clearCheckbox() {
+      if (this.form.ontime === '每天') {
+        this.form.onweek = []
+      }
+      if (this.form.offtime === '每天') {
+        this.form.offweek = []
+      }
+    },
+    resetForm(formName) {
+      this.addFromVisible = false
+      this.$refs[formName].resetFields()
+    },
+    submitForm(formName) {
+      console.log(this.form)
+      this.$refs[formName].validate(valid => {
+        if (valid) {
+          alert('submit!')
+        } else {
+          console.log('error submit!!')
+          return false
+        }
+      })
+    },
+    handleSelectionChange(val) {
+      this.selectedList = val
+      if (val.length > 0) {
+        this.clearBtnDisabled = false
+      } else {
+        this.clearBtnDisabled = true
+      }
+      console.log(val)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.col_flex {
+  display: flex;
+}
+.setting_btn{
+  margin-right: 10px;
+}
+.cover_img{
+  width: 65px;
+}
+.device_layer{
+  ::v-deep .el-dialog__body{
+    padding: 0 20px;
+  }
+  .setting_cont{
+    display: flex;
+    span{
+      display: block;
+      width: 80px;
+      line-height: 32px;
+    }
+    .no_margin {
+      margin: 0;
+    }
+    .weekly_margin{
+      margin-bottom: 6px;
+      ::v-deep .el-form-item__error{
+        top: 70%;
+      }
+    }
+    ::v-deep .el-form-item--small.el-form-item:last-child{
+      margin: 0;
+    }
+    ::v-deep .el-radio-group{
+      display: block;
+      // line-height: 32px;
+      .el-radio{
+        line-height: 32px;
+      }
+    }
+  }
+}
+
+</style>