紧急发布

src/views/materialContent/materialList/index.vue

@@ -207,7 +207,7 @@ export default {
   name: 'MaterialList',
   components: {},
   cruds() {
-    return CRUD({ title: '用户', url: 'api/users', crudMethod: { ...crudUser } })
+    return CRUD({ title: '用户', url: 'api/users', crudMethod: { ...crudUser }})
   },
   mixins: [presenter(), header(), form(defaultForm), crud()],
   props: {
@@ -292,7 +292,7 @@ export default {
       }
     }
   },
-  mounted: function () {
+  mounted: function() {
     this.start()
   },
   methods: {

src/views/publishContent/urgentMessage/index.vue

@@ -120,10 +120,35 @@
             ]"
           >
             <el-radio-group v-model="form.deviceSelect">
-              <el-radio label="所有设备" value="all" />
-              <el-radio label="部分设备" value="other" />
+              <el-radio label="all" value="all">所有设备</el-radio>
+              <el-radio label="other" value="other">部分设备<i class="radio_tip">添加</i></el-radio>
             </el-radio-group>
           </el-form-item>
+          <div v-if="form.deviceSelect === 'all'" class="select_all_tip">所有设备都将被发送</div>
+          <div v-if="form.deviceSelect === 'other'" class="select_other">
+            <el-row>
+              <el-col :span="10" class="other_tip">以下设备都将被发送<span>总计2个设备</span></el-col>
+              <el-col :span="4">
+                <el-button
+                  type="primary"
+                  round
+                  class="edit_btn"
+                >编辑</el-button>
+                <el-button round class="delt_btn">清空</el-button>
+              </el-col>
+            </el-row>
+            <el-tag
+              v-for="tag in dynamicTags"
+              :key="tag"
+              closable
+              :disable-transitions="true"
+              :hit="false"
+              color="#cbe3ff"
+              @close="handleClose(tag)"
+            >
+              {{ tag }}
+            </el-tag>
+          </div>
         </el-form>
         <div slot="footer" class="dialog-footer">
           <el-button :loading="crud.status.cu === 2" type="primary" round @click="crud.submitCU">保存</el-button>
@@ -176,7 +201,8 @@ export default {
           enabled: false,
           date: '2021-2-2 16:00'
         }
-      ]
+      ],
+      dynamicTags: ['GCXR1', 'GCXR2', 'GCXR3']
     }
   },
   methods: {
@@ -194,6 +220,9 @@ export default {
         this.clearBtnDisabled = true
       }
       console.log(val)
+    },
+    handleClose(tag) {
+      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1)
     }
   }
 }
@@ -206,4 +235,71 @@ export default {
     color: #3a8aeb;
   }
 }
+::v-deep .el-radio-group{
+  display: block;
+  .el-radio{
+    position: relative;
+    line-height: 40px;
+    .radio_tip{
+      position: absolute;
+      right: -45px;
+      top: 0;
+      display: block;
+      width: 42px;
+      height: 21px;
+      line-height: 21px;
+      font-size: 12px;
+      text-align: center;
+      color: #fff;
+      background: url(~@/assets/images/an-tj.png) no-repeat;
+      background-size: 42px 21px;
+    }
+  }
+}
+.select_all_tip{
+  width: 336px;
+  height: 32px;
+  line-height: 32px;
+  margin: -20px 0 0 100px;
+  padding: 0 14px;
+  font-size: 12px;
+  color: #999;
+  background: #fff;
+  box-shadow: 0 0 5px rgba(0,0,0,.14);
+}
+.select_other{
+  width: 600px;
+  margin: -20px 0 0 100px;
+  padding: 18px 23px;
+  background: #f8f8f8;
+  border: 1px solid #dcdde3;
+  border-radius: 4px;
+  .other_tip{
+    line-height: 24px;
+    span{
+      display: inline-block;
+      margin-left: 20px;
+    }
+  }
+  .el-button {
+    padding: 5px 8px;
+    border: none !important;
+  }
+  .delt_btn {
+    color: #fff;
+    background-color: #ee5747 !important;
+  }
+  .el-tag--small{
+    height: 28px;
+    line-height: 26px;
+    padding: 0 24px;
+    margin: 18px 16px 0 0;
+    font-size: 14px;
+    // color: #3a8aeb;
+    ::v-deep .el-icon-close{
+      font-size: 16px;
+    }
+  }
+}
+
 </style>