Browse Source

【企业公告】样式基本完成

liangyan0105 3 years ago
parent
commit
853ca1e616

+ 81 - 72
src/views/jeecg/RichText.vue

@@ -1,9 +1,9 @@
 <template>
-<div>
-  <editor v-model="content" tag-name="div" :init="init" />
-  <!-- 显示 -->
-  <!-- <div v-html="content" id="content"></div> -->
-</div>
+  <div>
+    <editor v-model="content" tag-name="div" :init="init" />
+    <!-- 显示 -->
+    <!-- <div v-html="content" id="content"></div> -->
+  </div>
 </template>
 
 <script>
@@ -17,82 +17,91 @@ import 'tinymce/plugins/table'
 import 'tinymce/plugins/lists'
 import 'tinymce/plugins/advlist'
 import 'tinymce/plugins/anchor'
-import 'tinymce/plugins/autolink' //锚点
+import 'tinymce/plugins/autolink' // 锚点
 import 'tinymce/plugins/autoresize'
 import 'tinymce/plugins/autosave'
-import 'tinymce/plugins/charmap' //特殊字符
-import 'tinymce/plugins/code' //查看源码
-import 'tinymce/plugins/codesample' //插入代码
+import 'tinymce/plugins/charmap' // 特殊字符
+import 'tinymce/plugins/code' // 查看源码
+import 'tinymce/plugins/codesample' // 插入代码
 import 'tinymce/plugins/directionality' //
-import 'tinymce/plugins/fullpage' //页面属性编辑
-import 'tinymce/plugins/fullscreen' //全屏
-import 'tinymce/plugins/help' //帮助
-import 'tinymce/plugins/hr' //横线
-import 'tinymce/plugins/image' //图片
-import 'tinymce/plugins/imagetools' //图片工具
-import 'tinymce/plugins/importcss' //图片工具
-import 'tinymce/plugins/insertdatetime' //时间插入
-import 'tinymce/plugins/media' //媒体插入
+import 'tinymce/plugins/fullpage' // 页面属性编辑
+import 'tinymce/plugins/fullscreen' // 全屏
+import 'tinymce/plugins/help' // 帮助
+import 'tinymce/plugins/hr' // 横线
+import 'tinymce/plugins/image' // 图片
+import 'tinymce/plugins/imagetools' // 图片工具
+import 'tinymce/plugins/importcss' // 图片工具
+import 'tinymce/plugins/insertdatetime' // 时间插入
+import 'tinymce/plugins/media' // 媒体插入
 import 'tinymce/plugins/nonbreaking' //
-import 'tinymce/plugins/noneditable' //不间断空格
-import 'tinymce/plugins/pagebreak' //分页
-import 'tinymce/plugins/paste' //粘贴
-import 'tinymce/plugins/preview' //预览
-import 'tinymce/plugins/print' //打印
-import 'tinymce/plugins/quickbars' //快捷菜单
-import 'tinymce/plugins/save' //保存
-import 'tinymce/plugins/searchreplace' //查询替换
-import 'tinymce/plugins/spellchecker' //拼写检查
+import 'tinymce/plugins/noneditable' // 不间断空格
+import 'tinymce/plugins/pagebreak' // 分页
+import 'tinymce/plugins/paste' // 粘贴
+import 'tinymce/plugins/preview' // 预览
+import 'tinymce/plugins/print' // 打印
+import 'tinymce/plugins/quickbars' // 快捷菜单
+import 'tinymce/plugins/save' // 保存
+import 'tinymce/plugins/searchreplace' // 查询替换
+import 'tinymce/plugins/spellchecker' // 拼写检查
 import 'tinymce/plugins/tabfocus' //
-import 'tinymce/plugins/template' //插入模板
+import 'tinymce/plugins/template' // 插入模板
 import 'tinymce/plugins/textpattern' //
 import 'tinymce/plugins/toc' //
 import 'tinymce/plugins/visualblocks' //
 import 'tinymce/plugins/visualchars' //
-import 'tinymce/plugins/wordcount' //数字统计
+import 'tinymce/plugins/wordcount' // 数字统计
 export default {
-  props: {
-    modelValue: String
-  },
-  components: {
-    editor: Editor
-  },
-  data() {
-    return {
-      content: this.modelValue,
-      init :{
-      language_url: require("./../../utils/zh_CN.js"), // 中文语言包路径
-      language: 'zh_CN',
-      skin_url: require('tinymce/skins/ui/oxide/skin.css'), // 编辑器皮肤样式
-      menubar: false, // 隐藏菜单栏
-      autoresize_bottom_margin: 50,
-      max_height: 500,
-      min_height: 350,
-      //   height: 320,
-      toolbar_mode: 'none',
-      plugins:
-        'wordcount visualchars visualblocks toc textpattern template tabfocus spellchecker searchreplace save quickbars print preview paste pagebreak noneditable nonbreaking media insertdatetime importcss imagetools image hr help fullscreen fullpage directionality codesample code charmap link code table lists advlist anchor autolink autoresize autosave', // 插件需要import进来
-      toolbar:
-        'formats undo redo paste print fontsizeselect fontselect template fullpage|wordcount ltr rtl visualchars visualblocks toc spellchecker searchreplace|save preview pagebreak nonbreaking|media image|outdent indent aligncenter alignleft alignright alignjustify lineheight  underline quicklink h2 h3 blockquote numlist bullist table removeformat forecolor backcolor bold italic  strikethrough hr charmap link insertdatetime|subscript superscript cut codesample code |anchor preview fullscreen|help',
-      content_style: 'p {margin: 5px 0; font-size: 14px}',
-      fontsize_formats: '12px 14px 16px 18px 24px 36px 48px 56px 72px',
-      font_formats:
-        '微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;',
-      branding: false,
-      elementpath: false,
-      resize: false, // 禁止改变大小
-      statusbar: false, // 隐藏底部状态栏
-      //   图片上传
-      images_upload_handler: function(blobInfo, success) {
-        var reader = new FileReader()
-        reader.readAsDataURL(blobInfo.blob())
-        reader.onload = function() {
-          success(this.result)
+    name: 'RichText',
+    components: {
+        editor: Editor
+    },
+    props: {
+        // 接收父组件 addann 的属性
+        modelValue: {
+            type: String,
+            default: null
         }
-      }
-    }
-    }
-  },
-  methods: {}
+    },
+
+    data () {
+        return {
+            content: this.modelValue,
+            init: {
+                language_url: require('./../../utils/zh_CN.js'), // 中文语言包路径
+                language: 'zh_CN',
+                skin_url: require('tinymce/skins/ui/oxide/skin.css'), // 编辑器皮肤样式
+                menubar: false, // 隐藏菜单栏
+                autoresize_bottom_margin: 50,
+                max_height: 500,
+                min_height: 350,
+                //   height: 320,
+                toolbar_mode: 'none',
+                plugins:
+          'wordcount visualchars visualblocks toc textpattern template tabfocus spellchecker searchreplace save quickbars print preview paste pagebreak noneditable nonbreaking media insertdatetime importcss imagetools image hr help fullscreen fullpage directionality codesample code charmap link code table lists advlist anchor autolink autoresize autosave', // 插件需要import进来
+                toolbar:
+          'formats undo redo paste print fontsizeselect fontselect template fullpage|wordcount ltr rtl visualchars visualblocks toc spellchecker searchreplace|save preview pagebreak nonbreaking|media image|outdent indent aligncenter alignleft alignright alignjustify lineheight  underline quicklink h2 h3 blockquote numlist bullist table removeformat forecolor backcolor bold italic  strikethrough hr charmap link insertdatetime|subscript superscript cut codesample code |anchor preview fullscreen|help',
+                content_style: 'p {margin: 5px 0; font-size: 14px}',
+                fontsize_formats: '12px 14px 16px 18px 24px 36px 48px 56px 72px',
+                font_formats:
+          '微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;',
+                branding: false,
+                elementpath: false,
+                resize: false, // 禁止改变大小
+                statusbar: false, // 隐藏底部状态栏
+                //   图片上传
+                images_upload_handler: function (blobInfo, success) {
+                    var reader = new FileReader()
+                    reader.readAsDataURL(blobInfo.blob())
+                    reader.onload = function () {
+                        success(this.result)
+                    }
+                }
+            }
+        }
+    },
+    methods: {}
 }
-</script>
+</script>
+<style lang="less" scoped>
+@import '~@assets/less/common.less';
+</style>

+ 124 - 0
src/views/oa/enter-ann/add/addAnnModal.vue

@@ -0,0 +1,124 @@
+<template>
+  <a-modal
+    title="新增公告"
+    v-model="addModalVisible"
+    :confirmLoading="confirmLoading"
+    @ok="handleOk"
+    @cancel="handleCancel"
+    width="80%"
+  >
+    <!-- tabel 加载 -->
+    <a-spin :spinning="confirmLoading">
+      <a-form :form="addform" :label-col="{ span: 4 }" :wrapper-col="{ span: 18 }">
+        <!-- 标题 类型 -->
+        <a-row :gutter="24">
+          <a-col :span="12">
+            <a-form-item label="标题">
+              <a-input
+                v-decorator="['title', { rules: [{ required: true, message: '请输入标题' }] }]"
+                placeholder="请输入标题"
+              />
+            </a-form-item>
+          </a-col>
+          <a-col :span="12">
+            <a-form-item label="类型">
+              <a-select
+                v-decorator="['type', { rules: [{ required: true, message: '请选择类型' }] }]"
+                placeholder="请选择类型"
+              >
+                <a-select-option value="人事">人事</a-select-option>
+                <a-select-option value="财务">财务</a-select-option>
+                <a-select-option value="项目">项目</a-select-option>
+              </a-select>
+            </a-form-item>
+          </a-col>
+        </a-row>
+
+        <!-- 创建人  时间 -->
+        <a-row :gutter="24">
+          <a-col :span="12">
+            <a-form-item label="创建人">
+              <a-input
+                v-decorator="['createBy', { rules: [{ required: true, message: '请输入创建人' }] }]"
+                placeholder="请输入创建人"
+              />
+            </a-form-item>
+          </a-col>
+
+          <a-col :span="12">
+            <a-form-item label="创建日期">
+              <a-date-picker
+                showTime
+                placeholder="请选择创建日期"
+                @change="createTimeChange"
+                @ok="createTimeOk"
+                v-decorator="['createTime', { rules: [{ required: false, message: '请选择紧创建日期' }] }]"
+              />
+            </a-form-item>
+          </a-col>
+        </a-row>
+
+        <!-- 内容 -->
+        <a-row :gutter="24">
+          <a-col :span="24">
+            <a-form-item label="内容">
+              <div v-decorator="['details', { rules: [{ required: true, message: '请输入公告内容' }] }]">
+                <!-- 引入富文本 组件 -->
+                <RichText ref="RichText" :modelValue="smallText"></RichText>
+              </div>
+            </a-form-item>
+          </a-col>
+        </a-row>
+      </a-form>
+    </a-spin>
+  </a-modal>
+</template>
+
+<script>
+import { Moment } from 'moment'
+import { defineComponent } from 'vue'
+import RichText from '@views/jeecg/RichText.vue'
+export default {
+    name: 'AddAnnModal',
+    components: {
+        RichText
+    },
+    data () {
+        return {
+            addform: this.$form.createForm(this),
+            confirmLoading: false,
+            addModalVisible: false,
+            smallText: ''// 弹框内富文本的内容
+        }
+    },
+    created () {},
+    methods: {
+    // 新增
+    // 修改 (回显)
+
+        // 弹框保存
+        handleOk () {
+            // 触发表单验证
+            console.log('弹框点击了保存')
+        },
+        close () {
+            this.$emit('close')
+            this.visible = false
+        },
+        handleCancel () {
+            this.close()
+        },
+        createTimeChange (value, dateString) {
+            // value:Moment[],dateString:string[]
+            console.log('Selected Time:', value)
+            console.log('Formatted Selected Time:', dateString)
+        },
+        createTimeOk (value) {
+            console.log('createTimeOk:', value)
+        }
+    }
+}
+</script>
+<style lang="less" scoped>
+@import '~@assets/less/common.less';
+</style>

+ 184 - 0
src/views/oa/enterpriseAnnouncement.vue

@@ -0,0 +1,184 @@
+<template>
+  <!-- :bordered="false" -->
+  <a-card>
+    <!-- 查询 -->
+    <div class="table-page-search-wrapper">
+      <a-form layout="inline" @keyup.enter.native="searchQuery">
+        <a-row :gutter="24">
+          <a-col :md="6" :sm="8">
+            <a-form-item label="标题">
+              <a-input placeholder="请输入搜索关键词"></a-input>
+            </a-form-item>
+          </a-col>
+
+          <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
+            <a-col :md="6" :sm="12">
+              <a-button type="primary" style="left: 10px" @click="searchQuery" icon="search">查询</a-button>
+              <a-button type="primary" @click="reset" icon="reload" style="margin-left: 8px;left: 10px">
+                重置
+              </a-button>
+            </a-col>
+          </span>
+        </a-row>
+      </a-form>
+    </div>
+
+    <!-- 新增 批量删除 -->
+    <div class="table-add">
+      <a-button @click="addOpen" type="primary" icon="plus">新增</a-button>
+      <!-- 批量操作-----------------------------------
+                   v-if="selectedRowKeys.length > 0"
+      ------------------------------------------------>
+      <a-dropdown>
+        <a-menu slot="overlay">
+          <a-menu-item key="1" @click="batchDel"><a-icon type="delete" />删除</a-menu-item>
+        </a-menu>
+        <a-button style="margin-left: 8px"> 批量操作 <a-icon type="down"/></a-button>
+      </a-dropdown>
+    </div>
+
+    <div>
+      <!-- 已选择 清空 -->
+      <div class="ant-alert ant-alert-info" style="margin: 16px 0;background:#e6f7ff;">
+        <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择
+        <!-- {{ selectedRowKeys.length }} -->
+        <a style="font-weight: 600">2</a>项
+        <a style="margin-left: 24px" @click="onClearSelected">清空</a>
+      </div>
+      <!-- table ----------------------------------------------------------------->
+      <a-table
+        ref="table"
+        size="middle"
+        bordered
+        :rowSelection="rowSelection"
+        :columns="columns"
+        :dataSource="data">
+        <a slot="name" slot-scope="text">{{ text }}</a>
+      </a-table>
+    </div>
+
+    <!-- 新增弹框 组件 -->
+    <addAnn-modal ref="AddAnnModal" @ok="modalFormOk"></addAnn-modal>
+  </a-card>
+</template>
+
+<script>
+// import { JeecgListMixin } from '@/mixins/JeecgListMixin'
+import AddAnnModal from '@views/oa/enter-ann/add/addAnnModal.vue'
+export default {
+    name: 'EnterpriseAnnouncement',
+    // mixins: [JeecgListMixin],
+    components: {
+        AddAnnModal
+    },
+    data () {
+        return {
+            // 表头
+            columns: [
+                {
+                    title: '序号',
+                    dataIndex: '',
+                    align: 'center',
+                    width: 60,
+                    customRender: function (index) {
+                        return parseInt(index) + 1
+                    }
+                },
+                {
+                    title: '标题',
+                    dataIndex: 'title',
+                    align: 'center',
+                    // width: 10,
+                    scopedSlots: { customRender: 'title' }
+                },
+                {
+                    title: '类型',
+                    dataIndex: 'type',
+                    align: 'center'
+                    // width: 60
+                },
+                {
+                    title: '创建人',
+                    dataIndex: 'createBy;',
+                    align: 'center'
+                    // width: 60
+                },
+                {
+                    title: '创建日期',
+                    dataIndex: 'createTime',
+                    align: 'center'
+                    // width: 60
+                },
+                {
+                    title: '发布',
+                    dataIndex: 'isRelease',
+                    align: 'center'
+                },
+                {
+                    title: '操作',
+                    dataIndex: 'operation',
+                    align: 'center',
+                    width: 200
+                }
+            ],
+            // 表数据 要改
+            data: [
+                {
+                    key: '1',
+                    title: '关于放假通知',
+                    type: '紧急',
+                    createBy: 'cc',
+                    createTime: '2021/09/09',
+                    isRelease: ['button', 'button'],
+                    operation: ['button', 'button', 'button']
+                }
+            ]
+        }
+    },
+    created () {},
+    methods: {
+        // 新增
+        addOpen () {
+            console.log('点击了大页面的新增')
+            // 拿到子组件的弹框 属性
+            this.$refs.AddAnnModal.addModalVisible = true
+        },
+        // 查询
+        searchQuery () {},
+        // 重置
+        reset () {},
+
+        // 批量删除
+        batchDel () {},
+        // 清空
+        onClearSelected () {},
+        // ??
+        modalFormOk () {}
+    },
+    computed: {
+    // 勾选框
+        rowSelection () {
+            return {
+                onChange: (selectedRowKeys, selectedRows) => {
+                    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows)
+                },
+                getCheckboxProps: record => ({
+                    props: {
+                        disabled: record.name === 'Disabled User', // Column configuration not to be checked
+                        name: record.name
+                    }
+                })
+            }
+        }
+    },
+    mounted () {}
+
+}
+</script>
+<style lang="less" scoped>
+@import '~@assets/less/common.less';
+.container {
+  background-color: white;
+  height: 300px;
+}
+</style>

+ 12 - 9
src/views/oa/my-plan/add/savePlan.vue

@@ -1,6 +1,7 @@
 <template>
   <div>
     <a-modal v-model="savePlanModalVisible" title="新增日程计划" @ok="handleOk" @cancel="handleCancel" width="52%">
+      
       <div>
         <a-divider orientation="left">基本信息</a-divider>
         <a-form :form="addForm" :label-col="{ span: 5 }" :wrapper-col="{ span: 17 }">
@@ -267,6 +268,7 @@ export default {
                 ]
             })
         },
+
         // 弹框 保存
         handleOk (e) {
             this.addForm.validateFields((err, values) => {
@@ -277,8 +279,8 @@ export default {
                     scheduleObject.title = values.title
                     scheduleObject.type = values.type
                     scheduleObject.degreeOfUrgency = values.degreeOfUrgency
-                    scheduleObject.startTime = values.continue[0].format('YYYY-MM-DD HH:mm')
-                    scheduleObject.endTime = values.continue[1].format('YYYY-MM-DD HH:mm')
+                    scheduleObject.startTime = values.continue[0].format('YYYY-MM-DD HH:mm:ss')
+                    scheduleObject.endTime = values.continue[1].format('YYYY-MM-DD HH:mm:ss')
                     scheduleObject.memo = values.memo
                     scheduleObject.backgroundColor = values.backgroundColor
                     // 修改------------------------------------------------
@@ -286,6 +288,7 @@ export default {
                         scheduleObject.id = this.formData.id
                         console.log('这是修改')
                         scheduleUpdate(scheduleObject).then(res => {
+                            // console.log('怎么修改功能没有了', res)
                             if (res.success) {
                                 this.$message.success('日程修改成功')
                                 this.savePlanModalVisible = false
@@ -293,13 +296,13 @@ export default {
                                 // 调用父组件方法(查询数据)
                                 this.fatherMethod()
                             }
-                            if (this.scheduleObject === this.formData) {
-                                console.log('00', this.scheduleObject)
-                                console.log('11', this.formData)
-                                console.log('没做修改的状态')
-                                this.$message.success('您未做任何修改')
-                                // 未做任何修改,状态不变
-                            }
+                            // if (this.scheduleObject === this.formData) {
+                            //     console.log('00', this.scheduleObject)
+                            //     console.log('11', this.formData)
+                            //     console.log('没做修改的状态')
+                            //     this.$message.success('您未做任何修改')
+                            //     // 未做任何修改,状态不变
+                            // }
                         })
                     } else {
                         // 新增------------------------------------------