2

src/styles/announcement.scss

@@ -121,7 +121,7 @@
   margin-top: 5vh !important;
   height: calc(100% - 10vh) !important;
   .el-dialog__body {
-    height: calc(100% - 73px);
+    height: calc(100% - 130px);
     overflow: auto;
   }
 }
@@ -236,3 +236,10 @@
     margin-top:5px !important;
   }
 }
+
+.el-form.hc-system-announcement-form .el-form-item {
+  .el-form-item__label {
+    line-height: unset;
+    padding-bottom: 5px;
+  }
+}

src/views/system/announcement.vue

@@ -55,7 +55,7 @@
                 <el-button size="small" @click="releasedShow">待发布</el-button>
               </el-badge>
               <el-button size="small" type="primary" @click="generalShow">发布普通公告</el-button>
-              <el-button size="small" type="warning">发布系统公告</el-button>
+              <el-button size="small" type="warning" @click="systemUpdateShow">发布系统公告</el-button>
               <el-button size="small" type="danger">批量删除公告</el-button>
             </div>
           </div>
@@ -233,10 +233,122 @@
 
     <!--发布普通公告-->
     <el-dialog
-      class="hc-system-announcement-dialog h-full" title="发布普通公告" :visible.sync="isGeneralShow"
-      append-to-body center destroy-on-close width="620px" @closed="generalCancel"
+      class="hc-system-announcement-dialog w-700px" title="发布普通公告" :visible.sync="isGeneralShow"
+      width="700px" append-to-body center destroy-on-close @closed="generalCancel"
     >
-      222
+      <el-form :model="generalFormModel" :rules="generalFormRules" ref="generalFormRef" class="hc-system-announcement-form" label-position="top">
+        <el-form-item label="公告内容：" prop="key">
+          <el-input type="textarea" v-model="generalFormModel.key" rows="3"></el-input>
+        </el-form-item>
+        <el-form-item label="发布备注：" prop="desc">
+          <el-input type="textarea" v-model="generalFormModel.desc"></el-input>
+        </el-form-item>
+        <el-form-item label="发布配置：" prop="key1">
+          <el-radio-group v-model="generalFormModel.key1">
+            <el-radio label="0">现在</el-radio>
+            <el-radio label="3">三分钟后</el-radio>
+            <el-radio label="5">五分钟后</el-radio>
+            <el-radio label="10">十分钟后</el-radio>
+            <el-radio label="999">
+              <el-date-picker v-model="generalFormModel.key1Val" type="datetime" placeholder="选择日期时间" size="small"></el-date-picker>
+            </el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="公告停留时间：" prop="key2">
+          <el-radio-group v-model="generalFormModel.key2">
+            <el-radio label="1">一分钟</el-radio>
+            <el-radio label="3">三分钟</el-radio>
+            <el-radio label="5">五分钟</el-radio>
+            <el-radio label="10">十分钟</el-radio>
+            <el-radio label="999">
+              <el-select v-model="generalFormModel.key2Val" clearable filterable size="small" style="width: 90px;">
+                <el-option v-for="i in 60" :label="`${i}分钟`" :value="i"></el-option>
+              </el-select>
+            </el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="涉及系统：" prop="key3">
+          <el-checkbox-group v-model="generalFormModel.key3">
+            <el-checkbox label="1">质检系统</el-checkbox>
+            <el-checkbox label="2">档案系统</el-checkbox>
+            <el-checkbox label="3">计量系统</el-checkbox>
+          </el-checkbox-group>
+        </el-form-item>
+      </el-form>
+      <div slot="footer">
+        <el-button @click="generalCancel">取消</el-button>
+        <el-button type="primary" @click="generalFormSubmit">确定</el-button>
+      </div>
+    </el-dialog>
+
+    <!--发布系统公告-->
+    <el-dialog
+      class="hc-system-announcement-dialog h-full w-700px" title="发布系统公告" :visible.sync="isSystemUpdateShow"
+      width="700px" append-to-body center destroy-on-close @closed="systemUpdateCancel"
+    >
+      <el-form :model="updateFormModel" :rules="updateFormRules" ref="updateFormRef" class="hc-system-announcement-form" label-position="top">
+        <el-form-item label="公告内容：" prop="key">
+          <el-input type="textarea" v-model="updateFormModel.key" rows="3"></el-input>
+        </el-form-item>
+        <el-form-item label="发布备注：" prop="desc">
+          <el-input type="textarea" v-model="updateFormModel.desc"></el-input>
+        </el-form-item>
+        <el-form-item label="更新类型：" prop="key4">
+          <el-checkbox-group v-model="updateFormModel.key4">
+            <el-checkbox label="1">前端页面</el-checkbox>
+            <el-checkbox label="2">后端接口</el-checkbox>
+          </el-checkbox-group>
+        </el-form-item>
+        <el-form-item label="更新原因：" prop="key5">
+          <el-radio-group v-model="updateFormModel.key5">
+            <el-radio label="1">新功能需求</el-radio>
+            <el-radio label="2">bug修复</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="发布配置：" prop="key1">
+          <el-radio-group v-model="updateFormModel.key1">
+            <el-radio label="0">现在</el-radio>
+            <el-radio label="3">三分钟后</el-radio>
+            <el-radio label="5">五分钟后</el-radio>
+            <el-radio label="10">十分钟后</el-radio>
+            <el-radio label="999">
+              <el-date-picker v-model="updateFormModel.key1Val" type="datetime" placeholder="选择日期时间" size="small"></el-date-picker>
+            </el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="时间配置：" prop="key2">
+          <span>剩余</span>
+          <span style="margin-left: 5px">
+            <el-select v-model="updateFormModel.key2Val" clearable filterable size="small" style="width: 90px;" placeholder="分钟">
+                <el-option v-for="i in 60" :label="`${i}分钟`" :value="i"></el-option>
+              </el-select>
+          </span>
+          <span style="margin-left: 5px">进行提醒，</span>
+          <span style="margin-left: 5px">
+            <el-select v-model="updateFormModel.key2Val1" clearable filterable size="small" style="width: 70px;" placeholder="时间">
+                <el-option v-for="i in 60" :label="i" :value="i"></el-option>
+              </el-select>
+          </span>
+          <span style="margin-left: 5px">
+            <el-select v-model="updateFormModel.key2Val2" clearable filterable size="small" style="width: 80px;" placeholder="单位">
+                <el-option label="分钟" value="1"></el-option>
+                <el-option label="秒钟" value="2"></el-option>
+              </el-select>
+          </span>
+          <span style="margin-left: 5px">开始进入倒计时</span>
+        </el-form-item>
+        <el-form-item label="涉及系统：" prop="key3">
+          <el-checkbox-group v-model="updateFormModel.key3">
+            <el-checkbox label="1">质检系统</el-checkbox>
+            <el-checkbox label="2">档案系统</el-checkbox>
+            <el-checkbox label="3">计量系统</el-checkbox>
+          </el-checkbox-group>
+        </el-form-item>
+      </el-form>
+      <div slot="footer">
+        <el-button @click="systemUpdateCancel">取消</el-button>
+        <el-button type="primary" @click="updateFormSubmit">确定</el-button>
+      </div>
     </el-dialog>
   </div>
 </template>
@@ -246,8 +358,10 @@ import '@/styles/announcement.scss'
 export default {
   data() {
     return {
-      isSystemInfoShow: false,
+      //系统索引
       systemClassify: '1-1',
+      //系统信息
+      isSystemInfoShow: false,
       systemInfoData: {type: '1'},
       systemInfoRules: {
         type: [{ required: true, message: '请选择数据类型', trigger: 'blur' }],
@@ -256,7 +370,9 @@ export default {
         client: [{ required: true, message: '请选择关联应用', trigger: 'blur' }],
         title: [{ required: true, message: '请输入项目名称', trigger: 'blur' }],
       },
+      //搜索
       searchForm: {current: 1, size: 20, total: 0},
+      //公告列表
       tableData: [{
         date: '2016-05-02',
         name: '王小虎',
@@ -277,8 +393,22 @@ export default {
         name: '王小虎',
         address: '上海市普陀区金沙江路 1516 弄'
       }],
+      //待发布
       isReleasedShow: false,
+      //普通公告
       isGeneralShow: false,
+      generalFormModel: {
+        key1Val: null,
+        key2Val: null,
+        key3: [],
+      },
+      generalFormRules: {},
+      //系统更新
+      isSystemUpdateShow: false,
+      updateFormModel: {
+        key3: [], key4: []
+      },
+      updateFormRules: {},
     }
   },
   computed: {
@@ -350,10 +480,25 @@ export default {
     generalShow() {
       this.isGeneralShow = true
     },
+    generalFormSubmit() {
+      this.generalCancel()
+    },
     //普通公告关闭
     generalCancel() {
       this.isGeneralShow = false
     },
+    //系统更新公告关闭
+    systemUpdateShow() {
+      this.isSystemUpdateShow = true
+    },
+    //系统更新公告提交
+    updateFormSubmit() {
+      this.systemUpdateCancel()
+    },
+    //系统更新公告关闭
+    systemUpdateCancel() {
+      this.isSystemUpdateShow = false
+    },
     //验证表单
     async getFormValidate(ref) {
       return new Promise(resolve => {