feat: 多个模块新增功能与优化交互

1.  DictSelect组件新增单选按钮组渲染模式
2.  公告管理页面新增查看公告功能
3.  合同产品内容组件优化产品选择器与表格布局

klp-ui/src/views/system/notice/index.vue

@@ -96,6 +96,12 @@
       </el-table-column>
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-view"
+            @click="handleView(scope.row)"
+          >查看</el-button>
           <el-button
             size="mini"
             type="text"
@@ -166,6 +172,45 @@
         <el-button @click="cancel">取 消</el-button>
       </div>
     </el-dialog>
+
+    <!-- 查看公告对话框 -->
+    <el-dialog title="查看公告" :visible.sync="viewOpen" width="780px" append-to-body>
+      <el-form ref="viewForm" :model="viewForm" label-width="80px">
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="公告标题">
+              <span>{{ viewForm.noticeTitle }}</span>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="公告类型">
+              <dict-tag :options="dict.type.sys_notice_type" :value="viewForm.noticeType"/>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="状态">
+              <dict-tag :options="dict.type.sys_notice_status" :value="viewForm.status"/>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="创建者">
+              <span>{{ viewForm.createBy }}</span>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="创建时间">
+              <span>{{ parseTime(viewForm.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <div v-html="viewForm.noticeContent" class="notice-content" style="min-height: 192px; border: 1px solid #dcdfe6; padding: 10px; border-radius: 4px;"></div>
+          </el-col>
+        </el-row>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="viewOpen = false">关 闭</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
@@ -195,6 +240,10 @@ export default {
       title: "",
       // 是否显示弹出层
       open: false,
+      // 是否显示查看弹出层
+      viewOpen: false,
+      // 查看表单
+      viewForm: {},
       // 查询参数
       queryParams: {
         pageNum: 1,
@@ -261,6 +310,13 @@ export default {
       this.single = selection.length!=1
       this.multiple = !selection.length
     },
+    /** 查看按钮操作 */
+    handleView(row) {
+      getNotice(row.noticeId).then(response => {
+        this.viewForm = response.data;
+        this.viewOpen = true;
+      });
+    },
     /** 新增按钮操作 */
     handleAdd() {
       this.reset();
@@ -309,4 +365,13 @@ export default {
     }
   }
 };
-</script>
+</script>
+
+<style scoped>
+.notice-content img {
+  max-width: 100%;
+  height: auto;
+  display: block;
+  margin: 10px auto;
+}
+</style>