fix: some bugs

caused by new components such as SchemaTable

src/api/device.js

@@ -14,12 +14,15 @@ export function getRatios () {
     url: '/device/resolutionRatio',
     method: 'GET'
   }).then(({ data }) => {
-    return Object.keys(data).map(key => {
-      return {
-        value: key,
-        label: `${key} ${data[key].map(device => device.name).join(', ')}`
-      }
-    })
+    return {
+      data: Object.keys(data).map(key => {
+        return {
+          value: key,
+          label: key,
+          devices: data[key].map(device => device.name).join(', ')
+        }
+      })
+    }
   })
 }
 

src/components/EventPicker/index.vue

@@ -1,10 +1,10 @@
 <template>
   <div
-    class="c-event"
+    class="c-grid-form medium c-event"
     :class="{ row: !vertical, col: vertical }"
   >
-    <div class="c-event__section">
-      <div class="c-event__label">播放频率</div>
+    <div class="c-grid-form__label">播放频率</div>
+    <div>
       <el-select
         v-model="eventOptions.freq"
         class="c-event__option"
@@ -18,99 +18,85 @@
       </el-select>
     </div>
     <template v-if="isOnce">
-      <div class="c-event__section">
-        <div class="c-event__label required">生效时间</div>
-        <el-date-picker
-          v-model="eventOptions.start"
-          class="c-event__option"
-          type="datetime"
-          placeholder="选择生效时间"
-          value-format="yyyy-MM-dd HH:mm:ss"
-          :picker-options="pickerOptions"
-          @change="onDateTimeChange('start')"
-        />
-      </div>
-      <div class="c-event__section">
-        <div class="c-event__label">失效时间</div>
-        <el-date-picker
-          v-model="eventOptions.until"
-          class="c-event__option"
-          type="datetime"
-          :disabled="!eventOptions.start"
-          placeholder="选择失效时间"
-          value-format="yyyy-MM-dd HH:mm:ss"
-          :default-value="eventOptions.start"
-          :picker-options="endPickerOptions"
-          @change="onDateTimeChange('until')"
-        />
-      </div>
+      <div class="c-grid-form__label required">生效时间</div>
+      <el-date-picker
+        v-model="eventOptions.start"
+        class="c-event__option"
+        type="datetime"
+        placeholder="选择生效时间"
+        value-format="yyyy-MM-dd HH:mm:ss"
+        :picker-options="pickerOptions"
+        @change="onDateTimeChange('start')"
+      />
+      <div class="c-grid-form__label">失效时间</div>
+      <el-date-picker
+        v-model="eventOptions.until"
+        class="c-event__option"
+        type="datetime"
+        :disabled="!eventOptions.start"
+        placeholder="选择失效时间"
+        value-format="yyyy-MM-dd HH:mm:ss"
+        :default-value="eventOptions.start"
+        :picker-options="endPickerOptions"
+        @change="onDateTimeChange('until')"
+      />
     </template>
     <template v-if="isWeekly">
-      <div class="c-event__section">
-        <div class="c-event__label required">每周</div>
-        <el-checkbox-group
-          v-model="eventOptions.byDay"
-          class="c-event__option"
-          size="mini"
-          fill="#1c5cb0"
+      <div class="c-grid-form__label c-grid-form__auto required">每周</div>
+      <el-checkbox-group
+        v-model="eventOptions.byDay"
+        class="c-grid-form__auto l-flex--row c-event__option"
+        size="mini"
+        fill="#1c5cb0"
+      >
+        <el-checkbox-button
+          v-for="week in weeks"
+          :key="week.value"
+          :label="week.value"
         >
-          <el-checkbox-button
-            v-for="week in weeks"
-            :key="week.value"
-            :label="week.value"
-          >
-            {{ week.label }}
-          </el-checkbox-button>
-        </el-checkbox-group>
-      </div>
-      <div class="c-event__section">
-        <div class="c-event__label required">开始时间</div>
-        <el-time-picker
-          v-model="eventOptions.startTime"
-          class="c-event__option"
-          placeholder="选择开始时间"
-          value-format="HH:mm:ss"
-          :clearable="false"
-        />
-      </div>
-      <div class="c-event__section">
-        <div class="c-event__label required">结束时间</div>
-        <el-time-picker
-          v-model="eventOptions.endTime"
-          class="c-event__option"
-          placeholder="选择结束时间"
-          value-format="HH:mm:ss"
-          :clearable="false"
-        />
-      </div>
-      <div class="c-event__section c-event__tip">结束时间小于等于开始时间为跨天播放</div>
-      <div class="c-event__section">
-        <div class="c-event__label required">生效日期</div>
-        <el-date-picker
-          v-model="eventOptions.start"
-          class="c-event__option"
-          type="date"
-          placeholder="选择生效日期"
-          value-format="yyyy-MM-dd HH:mm:ss"
-          :picker-options="pickerOptions"
-          @change="onDateTimeChange('start')"
-        />
-      </div>
-      <div class="c-event__section">
-        <div class="c-event__label">失效日期</div>
-        <el-date-picker
-          v-model="eventOptions.until"
-          class="c-event__option"
-          type="date"
-          :disabled="!eventOptions.start"
-          placeholder="选择失效日期"
-          value-format="yyyy-MM-dd HH:mm:ss"
-          :default-value="eventOptions.start"
-          :picker-options="endPickerOptions"
-          @change="onDateTimeChange('until')"
-        />
-      </div>
-      <div class="c-event__section c-event__tip">失效日期当天不触发</div>
+          {{ week.label }}
+        </el-checkbox-button>
+      </el-checkbox-group>
+      <div class="c-grid-form__label required">开始时间</div>
+      <el-time-picker
+        v-model="eventOptions.startTime"
+        class="c-event__option"
+        placeholder="选择开始时间"
+        value-format="HH:mm:ss"
+        :clearable="false"
+      />
+      <div class="c-grid-form__label required">结束时间</div>
+      <el-time-picker
+        v-model="eventOptions.endTime"
+        class="c-grid-form__info c-event__option"
+        data-info="结束时间小于等于开始时间为跨天播放"
+        placeholder="选择结束时间"
+        value-format="HH:mm:ss"
+        :clearable="false"
+      />
+      <div class="c-grid-form__label required">生效日期</div>
+      <el-date-picker
+        v-model="eventOptions.start"
+        class="c-event__option"
+        type="date"
+        placeholder="选择生效日期"
+        value-format="yyyy-MM-dd HH:mm:ss"
+        :picker-options="pickerOptions"
+        @change="onDateTimeChange('start')"
+      />
+      <div class="c-grid-form__label">失效日期</div>
+      <el-date-picker
+        v-model="eventOptions.until"
+        class="c-grid-form__info c-event__option"
+        data-info="失效日期当天不触发"
+        type="date"
+        :disabled="!eventOptions.start"
+        placeholder="选择失效日期"
+        value-format="yyyy-MM-dd HH:mm:ss"
+        :default-value="eventOptions.start"
+        :picker-options="endPickerOptions"
+        @change="onDateTimeChange('until')"
+      />
     </template>
   </div>
 </template>
@@ -299,67 +285,8 @@ export default {
 
 <style lang="scss" scoped>
 .c-event {
-  display: inline-flex;
-  flex-direction: column;
-  max-width: 100%;
-
-  &__section {
-    align-self: stretch;
-    color: $black;
-
-    & + & {
-      margin-top: $spacing;
-    }
-  }
-
-  &__label {
-    margin-bottom: 8px;
-    font-size: 14px;
-    line-height: 1;
-    font-weight: bold;
-
-    &.required::before {
-      content: "*";
-      color: #ff0000;
-    }
-  }
-
-  &__tip {
-    margin-top: 0 !important;
-    color: $info;
-    font-size: 12px;
-  }
-
-  &.row {
-    .c-event__section {
-      display: flex;
-      align-items: center;
-    }
-
-    .c-event__label {
-      flex: none;
-      margin: 0 10px 0 0;
-      width: 80px;
-      text-align: right;
-      &::after {
-        content: "：";
-      }
-    }
-
-    .c-event__option {
-      flex: 1 1 auto;
-      min-width: 300px;
-    }
-
-    .c-event__tip {
-      padding-left: 90px;
-    }
-  }
-
-  &.col {
-    .c-event__label {
-      margin-bottom: 8px;
-    }
+  &.row &__option {
+    width: 100%;
   }
 }
 </style>

src/components/Schedule/ScheduleCalendar/EventEdit.vue

@@ -1,16 +1,15 @@
 <template>
-  <div class="c-form auto">
+  <div>
     <event-picker
       ref="picker"
-      class="c-form__section"
       :event="event"
     />
-    <div class="c-form__section">
+    <div class="o-program u-pointer">
       <div
-        class="l-flex__fill o-program-name u-ellipsis u-pointer"
+        class="o-program__name has-padding--h"
         @click="onChoose"
       >
-        {{ msg }}
+        <div class="u-ellipsis">{{ msg }}</div>
       </div>
     </div>
     <event-target-dialog
@@ -85,13 +84,23 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.o-program-name {
-  padding: $spacing;
+.o-program {
+  position: relative;
+  height: 48px;
+  margin-top: 10px;
   color: $blue;
   font-size: 16px;
   line-height: 1;
-  text-align: center;
   border-radius: 4px;
   border: 1px solid $gray;
+
+  &__name {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+  }
 }
 </style>

src/components/dialog/EventTargetDialog/index.vue

@@ -2,6 +2,7 @@
   <table-dialog
     ref="tableDialog"
     title="选择播放内容"
+    size="medium"
     :schema="schema"
     append-to-body
     v-bind="$attrs"
@@ -41,9 +42,9 @@ export default {
           { key: 'name', type: 'search', placeholder: '节目名称' }
         ],
         cols: [
-          { prop: 'name', lable: '节目名称' },
+          { prop: 'name', label: '节目名称' },
           {
-            type: 'invoke', render: [
+            type: 'invoke', width: 180, render: [
               { label: '查看', on: this.onView }
             ]
           }

src/components/form/Select/index.vue

@@ -3,6 +3,7 @@
     :loading="loading"
     :placeholder="placeholderProxy"
     :clearable="clearableProxy"
+    popper-class="o-select-option"
     v-bind="$attrs"
     @visible-change="onVisibleChange"
     @change="onChange"

src/components/table/Table/index.vue

@@ -38,7 +38,7 @@
           <schema-select
             v-if="filter.type === 'select'"
             v-model="options.params[filter.key]"
-            class="o-select"
+            :class="{ 'o-select': !filter.remote || filter.simple }"
             :schema="filter"
             @change="onChange"
           />

src/router/index.js

@@ -243,7 +243,7 @@ export const asyncRoutes = [
         path: 'category',
         component: () => import('@/views/device/category/index'),
         access: Access.MANAGE_PRODUCTS,
-        meta: { title: '产品分类' }
+        meta: { title: '产品类型' }
       },
       {
         name: 'product',

src/scss/bem/_component.scss

@@ -196,7 +196,7 @@
 
   &__section {
     display: flex;
-    align-items: center;
+    align-items: flex-start;
     color: $black;
     font-size: 14px;
 
@@ -230,6 +230,7 @@
     flex: none;
     width: 100px;
     padding-right: 10px;
+    line-height: 40px;
     text-align: right;
 
     &.small {
@@ -240,10 +241,6 @@
       width: 180px;
     }
 
-    &.auto {
-      width: auto;
-    }
-
     &.required::before {
       content: '*';
       color: #ff0000;
@@ -266,9 +263,32 @@
 
 .c-grid-form {
   display: inline-grid;
-  grid-template-columns: auto 400px;
-  grid-row-gap: $spacing;
+  grid-template-columns: max-content minmax(400px, min-content);
+  grid-row-gap: 10px;
   grid-column-gap: 10px;
+  align-items: flex-start;
+
+  &.medium {
+    grid-template-columns: max-content minmax(300px, min-content);
+  }
+
+  &.mini {
+    grid-template-columns: max-content max-content;
+  }
+
+  &.col {
+    grid-template-columns: min-content;
+    grid-row-gap: 8px;
+
+    .c-grid-form__label {
+      text-align: left;
+      line-height: 1;
+    }
+
+    .c-grid-form__label ~ .c-grid-form__label {
+      padding-top: 2px;
+    }
+  }
 
   &__row {
     grid-column: span 2;
@@ -286,20 +306,30 @@
     }
   }
 
+  &__option {
+    min-height: 40px;
+  }
+
   &__info {
     position: relative;
-    min-height: 40px;
-    margin-bottom: 10px;
+    margin-bottom: 18px;
 
     &::after {
       content: attr(data-info);
       position: absolute;
       left: 0;
-      bottom: -20px;
+      bottom: -18px;
       color: $gray;
       font-size: 12px;
+      line-height: 1;
     }
   }
+
+  &__auto {
+    align-self: center;
+    min-height: 0;
+    line-height: normal;
+  }
 }
 
 .c-sibling-item {

src/views/basic/profile/index.vue

@@ -25,34 +25,33 @@
       </div>
       <div class="u-bold">{{ name }}</div>
     </div>
-    <div class="l-flex__fill u-overflow-y--auto">
+    <div class="l-flex__fill l-flex--col center">
       <warning
         v-if="error"
         @retry="getUserInfo"
       />
       <div
         v-else
-        class="c-form has-padding"
+        class="c-grid-form mini has-padding"
       >
-        <div class="c-form__section">
-          <span class="c-form__label">手机：</span>
+        <span class="c-grid-form__label">手机：</span>
+        <div>
           <el-input
             v-model="phone"
-            class="c-form__item"
             @change="onPhoneChange"
             @keydown.enter="$event.target.blur()"
           />
         </div>
-        <div class="c-form__section has-bottom-padding">
-          <span class="c-form__label">邮箱：</span>
+        <span class="c-grid-form__label">邮箱：</span>
+        <div>
           <el-input
             v-model="email"
-            class="c-form__item"
             @change="onEmailChange"
             @keydown.enter="$event.target.blur()"
           />
         </div>
-        <div class="c-form__section">
+        <div class="c-grid-form__label" />
+        <div class="l-flex--row">
           <i class="o-wechat" />
           <div
             class="has-padding u-pointer"

src/views/basic/upgrade/index.vue

@@ -75,7 +75,7 @@
           show-word-limit
         />
         <span class="c-grid-form__label">状态：</span>
-        <div class="l-flex--row">
+        <div class="l-flex--row c-grid-form__option">
           <el-radio
             v-model="apk.status"
             :label="1"
@@ -131,7 +131,6 @@ export default {
       schema: {
         condition: { status: void 0, name: '' },
         list: getApks,
-        transform: this.transform,
         buttons: [
           { type: 'add', on: this.onAdd }
         ],
@@ -150,9 +149,16 @@ export default {
           { prop: 'versionName', label: '版本名称' },
           { prop: 'versionCode', label: '版本号' },
           { prop: 'md5', label: 'MD5' },
-          { prop: 'size', label: '文件大小' },
+          { label: '文件大小', render ({ size }) {
+            return parseByte(size)
+          } },
           { prop: 'remark', label: '备注' },
-          { prop: 'status', label: '状态', type: 'tag', on: this.onTagClick },
+          { label: '状态', type: 'tag', render ({ status }) {
+            return {
+              type: status ? 'success' : 'danger',
+              label: status ? '启用' : '禁用'
+            }
+          }, on: this.onTagClick },
           {
             type: 'invoke', render: [
               { label: '禁用', render ({ status }) { return status === 1 }, on: this.onDeactive },
@@ -165,15 +171,6 @@ export default {
     }
   },
   methods: {
-    transform (apk) {
-      const { status } = apk
-      apk.status = {
-        type: status ? 'success' : 'danger',
-        label: status ? '启用' : '禁用'
-      }
-      apk.size = parseByte(apk.size)
-      return apk
-    },
     onAdd () {
       this.apk = {
         file: null,

src/views/bigscreen/ast/core/components/DynamicItem.vue

@@ -21,7 +21,7 @@
       class="c-dynamic-item__value"
       type="text"
       size="mini"
-      placeholder="请输入内容"
+      placeholder="请填写内容"
       clearable
     />
     <el-input
@@ -30,7 +30,7 @@
       class="c-dynamic-item__value"
       type="textarea"
       size="mini"
-      placeholder="请输入内容"
+      placeholder="请填写内容"
       @keydown.enter.native="onKeyEnter($event)"
       @change="onChange"
     />

src/views/bigscreen/core/components/ColorPicker.vue

@@ -1,7 +1,7 @@
 <template>
   <el-input
     v-model="colorValue"
-    placeholder="请输入颜色"
+    placeholder="请选择颜色"
     size="mini"
     clearable
     @change="changeColor"

src/views/bigscreen/core/components/DynamicItem.vue

@@ -21,7 +21,7 @@
       class="c-dynamic-item__value"
       type="text"
       size="mini"
-      placeholder="请输入内容"
+      placeholder="请填写内容"
       clearable
     />
     <el-input
@@ -30,7 +30,7 @@
       class="c-dynamic-item__value"
       type="textarea"
       size="mini"
-      placeholder="请输入内容"
+      placeholder="请填写内容"
       @keydown.enter.native="onKeyEnter($event)"
       @change="onChange"
     />
@@ -285,7 +285,8 @@ export default {
     align-self: center;
     min-width: 0;
 
-    ::v-deep .el-input__inner, ::v-deep .el-textarea__inner {
+    ::v-deep .el-input__inner,
+    ::v-deep .el-textarea__inner {
       color: #a8e3ff;
       border: 1px solid #3f5673;
       background-color: #263445;
@@ -330,13 +331,13 @@ export default {
       }
 
       &::-webkit-scrollbar-track {
-        box-shadow: 1px 1px 5px rgba(116, 148, 170, .5) inset;
+        box-shadow: 1px 1px 5px rgba(116, 148, 170, 0.5) inset;
       }
 
       &::-webkit-scrollbar-thumb {
         min-height: 20px;
         background-clip: content-box;
-        box-shadow: 0 0 0 5px rgba(116, 148, 170, .5) inset;
+        box-shadow: 0 0 0 5px rgba(116, 148, 170, 0.5) inset;
       }
     }
   }

src/views/bigscreen/index.vue

@@ -80,27 +80,20 @@
       title="新增节目"
       @confirm="onConfirmAdd"
     >
-      <div class="c-form">
-        <div class="c-form__section">
-          <span class="c-form__label">名称：</span>
-          <el-input
-            v-model.trim="program.name"
-            class="c-form__item"
-            placeholder="请输入名称"
-            maxlength="50"
-            show-word-limit
-          />
-        </div>
-        <div class="c-form__section">
-          <span class="c-form__label">分辨率：</span>
-          <schema-select
-            v-model="program.resolutionRatio"
-            class="c-form__item"
-            popper-class="o-select-option"
-            placeholder="请选择分辨率"
-            :schema="resolutionRatioSelectSchema"
-          />
-        </div>
+      <div class="c-grid-form u-align-self--center">
+        <span class="c-grid-form__label required">名称：</span>
+        <el-input
+          v-model.trim="program.name"
+          placeholder="请填写节目名称"
+          maxlength="50"
+          show-word-limit
+        />
+        <span class="c-grid-form__label required">分辨率：</span>
+        <schema-select
+          v-model="program.resolutionRatio"
+          placeholder="请选择分辨率"
+          :schema="resolutionRatioSelectSchema"
+        />
       </div>
     </confirm-dialog>
     <confirm-dialog
@@ -108,17 +101,14 @@
       title="复制节目"
       @confirm="onConfirmCopy"
     >
-      <div class="c-form">
-        <div class="c-form__section">
-          <span class="c-form__label auto">名称：</span>
-          <el-input
-            v-model.trim="copyProgram.name"
-            class="c-form__item"
-            placeholder="请输入名称"
-            maxlength="50"
-            show-word-limit
-          />
-        </div>
+      <div class="c-grid-form u-align-self--center">
+        <span class="c-grid-form__label required">名称：</span>
+        <el-input
+          v-model.trim="copyProgram.name"
+          placeholder="请填写节目名称"
+          maxlength="50"
+          show-word-limit
+        />
       </div>
     </confirm-dialog>
   </wrapper>
@@ -142,15 +132,13 @@ import { validate } from './core/utils'
 export default {
   name: 'BigScreen',
   data () {
-    const resolutionRatioSelectSchema = { remote: getRatios }
-
     return {
       program: {},
       copyProgram: {
         id: null,
         name: ''
       },
-      resolutionRatioSelectSchema,
+      resolutionRatioSelectSchema: { remote: this.getRatios },
       schema: {
         condition: {
           status: void 0,
@@ -162,7 +150,7 @@ export default {
           { type: 'add', on: this.onAdd }
         ],
         filters: [
-          { key: 'resolutionRatio', type: 'select', placeholder: '全部分辨率', ...resolutionRatioSelectSchema },
+          { key: 'resolutionRatio', type: 'select', placeholder: '全部分辨率', simple: true, remote: getRatios },
           { key: 'status', type: 'select', placeholder: '全部状态', options: [
             { value: State.READY, label: '待提交' },
             { value: State.SUBMITTED, label: '未审核' },
@@ -192,6 +180,18 @@ export default {
         }
       }
     },
+    getRatios (params) {
+      return getRatios(params).then(({ data }) => {
+        return {
+          data: data.map(({ value, label, devices }) => {
+            return {
+              value,
+              label: `${label} ${devices}`
+            }
+          })
+        }
+      })
+    },
     transform ({ id, name, status, resolutionRatio, createTime, img }) {
       return {
         id, name, status, resolutionRatio,

src/views/device/category/index.vue

@@ -9,34 +9,28 @@
       ref="table"
       :schema="schema"
     />
-    <el-dialog
+    <confirm-dialog
       ref="editDialog"
       :title="dialogTitle"
       @confirm="onSave"
     >
-      <div class="c-form">
-        <div class="c-form__section required">
-          <span class="c-form__label required">名称：</span>
-          <el-input
-            v-model.trim="currObj.name"
-            class="c-form__item"
-            maxlength="50"
-            show-word-limit
-          />
-        </div>
-        <div class="c-form__section">
-          <span class="c-form__label">备注：</span>
-          <el-input
-            v-model="currObj.remark"
-            class="c-form__item"
-            type="textarea"
-            :autosize="autoSize"
-            maxlength="100"
-            show-word-limit
-          />
-        </div>
+      <div class="c-grid-form u-align-self--center">
+        <span class="c-grid-form__label required">名称：</span>
+        <el-input
+          v-model.trim="currObj.name"
+          placeholder="请填写产品类型名称"
+          maxlength="50"
+        />
+        <span class="c-grid-form__label">备注：</span>
+        <el-input
+          v-model="currObj.remark"
+          type="textarea"
+          maxlength="100"
+          :rows="3"
+          show-word-limit
+        />
       </div>
-    </el-dialog>
+    </confirm-dialog>
   </wrapper>
 </template>
 
@@ -54,16 +48,12 @@ export default {
   mixins: [mixin],
   data () {
     return {
-      type: '产品分类',
+      type: '产品类型',
       proxy: {
         add: addProductType,
         update: updateProductType,
         del: deleteProductType
       },
-      autoSize: {
-        minRows: 4,
-        maxRows: 8
-      },
       schema: {
         condition: { name: '' },
         list: getProductTypes,
@@ -71,7 +61,7 @@ export default {
           { type: 'add', on: this.onAdd }
         ],
         cols: [
-          { prop: 'name', label: '分类名称' },
+          { prop: 'name', label: '产品类型名称' },
           { prop: 'remark', label: '备注' },
           {
             type: 'invoke', render: [

src/views/device/detail/components/DeviceInfo.vue

@@ -61,27 +61,21 @@
       title="编辑"
       @confirm="onSave"
     >
-      <div class="c-form">
-        <div class="c-form__section">
-          <span class="c-form__label required">名称：</span>
-          <el-input
-            v-model.trim="info.name"
-            class="c-form__item"
-            maxlength="50"
-            show-word-limit
-          />
-        </div>
-        <div class="c-form__section">
-          <span class="c-form__label required">地址：</span>
-          <el-input
-            v-model="info.remark"
-            class="c-form__item"
-            type="textarea"
-            :rows="3"
-            maxlength="100"
-            show-word-limit
-          />
-        </div>
+      <div class="c-grid-form u-align-self--center">
+        <span class="c-grid-form__label required">名称：</span>
+        <el-input
+          v-model.trim="info.name"
+          maxlength="50"
+          show-word-limit
+        />
+        <span class="c-grid-form__label required">地址：</span>
+        <el-input
+          v-model="info.remark"
+          type="textarea"
+          maxlength="100"
+          :rows="3"
+          show-word-limit
+        />
       </div>
     </confirm-dialog>
   </div>

src/views/device/detail/components/external/Transmitter/index.vue

@@ -9,18 +9,18 @@
         @retry="getDefaults"
       />
       <template v-if="info">
-        <div class="l-flex--row has-bottom-padding u-bold">
-          <span class="c-sibling-item">发送控制设备信息</span>
-          <!-- <span
-            v-if="canEdit"
-            class="c-sibling-item c-info__edit u-pointer"
-            @click="onBind"
-          >
-            <i class="el-icon-edit" />
-            重绑
-          </span> -->
-        </div>
-        <div class="l-flex__fill c-info large">
+        <div class="c-info large">
+          <div class="l-flex--row has-bottom-padding u-bold">
+            <span class="c-sibling-item">发送控制设备信息</span>
+            <!-- <span
+              v-if="canEdit"
+              class="c-sibling-item c-info__edit u-pointer"
+              @click="onBind"
+            >
+              <i class="el-icon-edit" />
+              重绑
+            </span> -->
+          </div>
           <div class="l-flex--row c-info__block">
             <div class="l-flex--row l-flex__fill c-info__item">
               <div class="l-flex__none c-info__title">设备名称</div>

src/views/device/group/index.vue

@@ -14,24 +14,21 @@
       :title="dialogTitle"
       @confirm="onSave"
     >
-      <div class="c-form">
-        <div class="c-form__section required">
-          <span class="c-form__label required">名称：</span>
-          <el-input
-            v-model.trim="currObj.name"
-            class="c-form__item"
-            maxlength="50"
-          />
-        </div>
-        <div class="c-form__section">
-          <span class="c-form__label">备注：</span>
-          <el-input
-            v-model="currObj.remark"
-            class="c-form__item"
-            type="textarea"
-            maxlength="100"
-          />
-        </div>
+      <div class="c-grid-form u-align-self--center">
+        <span class="c-grid-form__label required">名称：</span>
+        <el-input
+          v-model.trim="currObj.name"
+          placeholder="请填写分组名称"
+          maxlength="50"
+        />
+        <span class="c-grid-form__label">备注：</span>
+        <el-input
+          v-model="currObj.remark"
+          type="textarea"
+          maxlength="100"
+          :rows="3"
+          show-word-limit
+        />
       </div>
     </confirm-dialog>
     <table-dialog
@@ -156,7 +153,7 @@ export default {
       return getDevicesByGroup(id)
     },
     onDelDevice (device, index) {
-      const table = this.$refs.table
+      const table = this.$refs.subDeviceDialog.getTable()
       deleteDeviceFromGroup(table.getCondition().id, device).then(() => {
         table.getData().splice(index, 1)
       })
@@ -165,10 +162,10 @@ export default {
       this.$refs.deviceDialog.show()
     },
     onChooseDevice ({ value: { id }, done }) {
-      addDeviceToGroup(this.$refs.subDeviceDialog.getTable().getCondition().id, id).then(() => {
+      const table = this.$refs.subDeviceDialog.getTable()
+      addDeviceToGroup(table.getCondition().id, id).then(() => {
         done()
-        this.groupOptions.list = []
-        this.getDevicesByGroup()
+        table.pageTo()
       })
     }
   }

src/views/device/index.vue

@@ -16,53 +16,43 @@
       :title="dialogTitle"
       @confirm="onSave"
     >
-      <div class="c-form">
-        <div class="c-form__section">
-          <span class="c-form__label required">名称：</span>
-          <el-input
-            v-model.trim="currObj.name"
-            class="c-form__item"
-            maxlength="50"
-            show-word-limit
-          />
-        </div>
-        <div class="c-form__section">
-          <span class="c-form__label required">产品：</span>
-          <schema-select
-            v-model="currObj.productId"
-            class="c-form__item"
-            placeholder="请选择产品"
-            :schema="productSelectSchema"
-            :disabled="isSub"
-          />
-        </div>
-        <div class="c-form__section">
-          <span class="c-form__label required">序列号：</span>
-          <el-input
-            v-model.trim="currObj.serialNumber"
-            class="c-form__item"
-            maxlength="50"
-          />
-        </div>
-        <div class="c-form__section extra o-mac">
-          <span class="c-form__label required">MAC：</span>
-          <el-input
-            v-model.trim="currObj.mac"
-            class="c-form__item"
-            maxlength="17"
-          />
-        </div>
-        <div class="c-form__section">
-          <span class="c-form__label required">地址：</span>
-          <el-input
-            v-model="currObj.remark"
-            class="c-form__item"
-            type="textarea"
-            :rows="3"
-            maxlength="100"
-            show-word-limit
-          />
-        </div>
+      <div class="c-grid-form u-align-self--center">
+        <span class="c-grid-form__label required">名称：</span>
+        <el-input
+          v-model.trim="currObj.name"
+          placeholder="请填写设备名称"
+          maxlength="50"
+          show-word-limit
+        />
+        <span class="c-grid-form__label required">产品：</span>
+        <schema-select
+          v-model="currObj.productId"
+          placeholder="请选择产品"
+          :schema="productSelectSchema"
+          :disabled="isSub"
+        />
+        <span class="c-grid-form__label required">序列号：</span>
+        <el-input
+          v-model.trim="currObj.serialNumber"
+          placeholder="请填写设备序列号"
+          maxlength="50"
+        />
+        <span class="c-grid-form__label required">MAC：</span>
+        <el-input
+          v-model.trim="currObj.mac"
+          placeholder="ff:ff:ff:ff:ff"
+          maxlength="14"
+          show-word-limit
+        />
+        <span class="c-grid-form__label required">地址：</span>
+        <el-input
+          v-model="currObj.remark"
+          type="textarea"
+          placeholder="请填写设备地址"
+          maxlength="100"
+          :rows="3"
+          show-word-limit
+        />
       </div>
     </confirm-dialog>
     <event-target-dialog

src/views/device/product/index.vue

@@ -14,56 +14,48 @@
       :title="dialogTitle"
       @confirm="onSave"
     >
-      <div class="c-form">
-        <div class="c-form__section">
-          <span class="c-form__label required">名称：</span>
-          <el-input
-            v-model.trim="currObj.name"
-            class="c-form__item"
-            maxlength="50"
-            show-word-limit
-          />
-        </div>
-        <div class="c-form__section">
-          <span class="c-form__label required">分类：</span>
-          <schema-select
-            v-model="currObj.productTypeId"
-            class="c-form__item"
-            placeholder="请选择分类"
-            :disabled="!isAdd"
-            :schema="productTypeSelectSchema"
-          />
-        </div>
-        <div class="c-form__section">
-          <span class="c-form__label required">分辨率：</span>
-          <span class="c-form__label small">宽</span>
+      <div class="c-grid-form u-align-self--center">
+        <span class="c-grid-form__label required">名称：</span>
+        <el-input
+          v-model.trim="currObj.name"
+          placeholder="请填写产品名称"
+          maxlength="50"
+          show-word-limit
+        />
+        <span class="c-grid-form__label required">类型：</span>
+        <schema-select
+          v-model="currObj.productTypeId"
+          placeholder="请选择产品类型"
+          :disabled="!isAdd"
+          :schema="productTypeSelectSchema"
+        />
+        <span class="c-grid-form__label required">分辨率：</span>
+        <div class="l-flex--row c-grid-form__option">
+          <span class="has-padding--h">宽</span>
           <el-input-number
             v-model="currObj.wide"
-            class="c-form__item small"
+            class="l-flex__auto"
             :min="1"
             :max="999999"
             step-strictly
           />
-          <span class="c-form__label small">高</span>
+          <span class="has-padding--h">高</span>
           <el-input-number
             v-model="currObj.high"
-            class="c-form__item small"
+            class="l-flex__auto"
             :min="1"
             :max="999999"
             step-strictly
           />
         </div>
-        <div class="c-form__section">
-          <span class="c-form__label">备注：</span>
-          <el-input
-            v-model="currObj.remark"
-            class="c-form__item"
-            type="textarea"
-            maxlength="100"
-            :autosize="autoSize"
-            show-word-limit
-          />
-        </div>
+        <span class="c-grid-form__label">备注：</span>
+        <el-input
+          v-model="currObj.remark"
+          type="textarea"
+          maxlength="100"
+          :rows="3"
+          show-word-limit
+        />
       </div>
     </confirm-dialog>
   </wrapper>
@@ -101,10 +93,6 @@ export default {
       typeOptions: [],
       fetching: false,
       loaded: false,
-      autoSize: {
-        minRows: 4,
-        maxRows: 6
-      },
       productTypeSelectSchema,
       schema: {
         condition: { productTypeId: void 0 },
@@ -113,11 +101,11 @@ export default {
           { type: 'add', on: this.onAdd }
         ],
         filters: [
-          { key: 'productTypeId', type: 'select', placeholder: '全部分组', ...productTypeSelectSchema }
+          { key: 'productTypeId', type: 'select', placeholder: '全部类型', ...productTypeSelectSchema }
         ],
         cols: [
           { prop: 'name', label: '产品名称' },
-          { prop: 'productTypeName', label: '分类' },
+          { prop: 'productTypeName', label: '类型' },
           { label: '分辨率', render ({ wide, high }) { return `${wide}x${high}` } },
           { prop: 'remark', label: '备注' },
           {

src/views/external/transmitter/index.vue

@@ -24,12 +24,14 @@
         <span class="c-grid-form__label required">设备名称：</span>
         <el-input
           v-model.trim="transmitter.name"
+          placeholder="请填写设备名称"
           maxlength="50"
           show-word-limit
         />
         <span class="c-grid-form__label required">设备型号：</span>
         <el-input
           v-model.trim="transmitter.type"
+          placeholder="请填写设备型号"
           maxlength="50"
           show-word-limit
         />
@@ -60,8 +62,8 @@
         <el-input
           v-model="transmitter.remark"
           type="textarea"
-          :rows="3"
           maxlength="100"
+          :rows="3"
           show-word-limit
         />
       </div>

src/views/review/components/ReviewPublish.vue

@@ -49,7 +49,9 @@ export default {
           { prop: 'createTime', label: '审核时间' },
           {
             type: 'invoke', render: [
-              { label: '查看', on: this.onView }
+              { label: '查看', on: this.onView },
+              { label: '通过', on: this.onResolve },
+              { label: '驳回', on: this.onReject }
             ]
           }
         ]

src/views/review/index.vue

@@ -58,7 +58,11 @@
           <span class="c-grid-form__label required">原因：</span>
           <el-input
             v-model.trim="review.reason"
+            type="textarea"
+            placeholder="请填写驳回原因"
             maxlength="50"
+            :rows="3"
+            resize="none"
             show-word-limit
           />
         </template>

src/views/schedule/deploy/index.vue

@@ -55,7 +55,7 @@
         v-if="active === 1"
         class="c-list fill has-padding u-overflow-y--auto"
       >
-        <div class="c-list__section">
+        <div class="c-list__item">
           <div class="o-type">发布类型</div>
           <el-select v-model="eventOptions.type">
             <el-option
@@ -69,7 +69,7 @@
         <event-picker
           v-if="isEvent"
           ref="picker"
-          class="c-list__section"
+          class="c-list__item"
           :event="eventOptions.inst"
           :priority="3"
           vertical
@@ -94,14 +94,13 @@
         class="c-list fill has-padding u-overflow-y--auto"
       >
         <div
-          class="c-list__item o-choose-button"
+          class="o-choose-button"
           @click="showChoose"
         >
           点击选择内容
         </div>
         <schedule
           v-if="scheduleId"
-          class="c-list__item"
           :schedule="scheduleId"
         />
         <div
@@ -428,12 +427,16 @@ export default {
     max-width: initial;
   }
 
-  &__item + &__item {
-    margin-top: 8px;
-  }
+  &__item {
+    line-height: 1;
 
-  &__section + &__section {
-    margin-top: $spacing;
+    & + & {
+      margin-top: 8px;
+    }
+
+    &:nth-child(2) {
+      margin-top: 10px;
+    }
   }
 }
 
@@ -446,6 +449,7 @@ export default {
 
 .o-choose-button {
   padding: 20px 0;
+  margin-bottom: $spacing;
   font-size: 20px;
   text-align: center;
   border: 1px solid $gray--light;
@@ -465,7 +469,6 @@ export default {
 }
 
 .o-program {
-  margin-top: $spacing;
   font-size: 24px;
   font-weight: bold;
 

src/views/schedule/index.vue

@@ -14,27 +14,20 @@
       title="新增"
       @confirm="onConfirmAdd"
     >
-      <div class="c-form">
-        <div class="c-form__section">
-          <span class="c-form__label">名称：</span>
-          <el-input
-            v-model.trim="schedule.name"
-            class="c-form__item"
-            placeholder="请输入名称"
-            maxlength="50"
-            show-word-limit
-          />
-        </div>
-        <div class="c-form__section">
-          <span class="c-form__label">分辨率：</span>
-          <schema-select
-            v-model="schedule.resolutionRatio"
-            class="c-form__item"
-            popper-class="o-select-option"
-            placeholder="请选择分辨率"
-            :schema="resolutionRatioSelectSchema"
-          />
-        </div>
+      <div class="c-grid-form u-align-self--center">
+        <span class="c-grid-form__label required">名称：</span>
+        <el-input
+          v-model.trim="schedule.name"
+          :placeholder="placeholder"
+          maxlength="50"
+          show-word-limit
+        />
+        <span class="c-grid-form__label required">分辨率：</span>
+        <schema-select
+          v-model="schedule.resolutionRatio"
+          placeholder="请选择分辨率"
+          :schema="resolutionRatioSelectSchema"
+        />
       </div>
     </confirm-dialog>
     <confirm-dialog
@@ -42,17 +35,14 @@
       title="复制"
       @confirm="onConfirmCopy"
     >
-      <div class="c-form">
-        <div class="c-form__section">
-          <span class="c-form__label auto">名称：</span>
-          <el-input
-            v-model.trim="copySchedule.name"
-            class="c-form__item"
-            placeholder="请输入名称"
-            maxlength="50"
-            show-word-limit
-          />
-        </div>
+      <div class="c-grid-form u-align-self--center">
+        <span class="c-grid-form__label required">名称：</span>
+        <el-input
+          v-model.trim="copySchedule.name"
+          :placeholder="placeholder"
+          maxlength="50"
+          show-word-limit
+        />
       </div>
     </confirm-dialog>
     <schedule-dialog ref="scheduleDialog" />
@@ -86,15 +76,13 @@ export default {
     }
   },
   data () {
-    const resolutionRatioSelectSchema = { remote: getRatios }
-
     return {
       schedule: {},
       copySchedule: {
         id: null,
         name: ''
       },
-      resolutionRatioSelectSchema,
+      resolutionRatioSelectSchema: { remote: this.getRatios },
       schema: {
         condition: {
           type: this.type,
@@ -107,7 +95,7 @@ export default {
           { type: 'add', on: this.onAdd }
         ],
         filters: [
-          { key: 'resolutionRatio', type: 'select', placeholder: '全部分辨率', ...resolutionRatioSelectSchema },
+          { key: 'resolutionRatio', type: 'select', placeholder: '全部分辨率', simple: true, remote: getRatios },
           { key: 'status', type: 'select', placeholder: '全部状态', options: [
             { value: State.READY, label: '待提交' },
             { value: State.SUBMITTED, label: '未审核' },
@@ -140,12 +128,29 @@ export default {
       }
     }
   },
+  computed: {
+    placeholder () {
+      return `请填写${[null, '日程', '轮播', '排期'][this.type]}名称`
+    }
+  },
   activated () {
     if (this.$route.params.refresh) {
       this.$refs.table.resetCondition({ status: State.READY })
     }
   },
   methods: {
+    getRatios (params) {
+      return getRatios(params).then(({ data }) => {
+        return {
+          data: data.map(({ value, label, devices }) => {
+            return {
+              value,
+              label: `${label} ${devices}`
+            }
+          })
+        }
+      })
+    },
     onAdd () {
       this.schedule = {
         type: this.type,