inleft
2022-03-01 88f419df77ade235ea5e5e24be204842a24b7b33
commit | author | age
9bcb19 1 <template>
I 2   <a-modal
3     title="新增通知公告"
4     :width="1000"
5     :footer="null"
6     :visible="visible"
7     @cancel="handleCancel"
8   >
9     <a-spin :spinning="formLoading">
10       <a-form :form="form">
11         <a-form-item
12           label="标题"
13           :labelCol="labelCol"
14           :wrapperCol="wrapperCol"
15         >
16           <a-input placeholder="请输入标题" v-decorator="['title', {rules: [{required: true, message: '请输入标题!'}]}]" />
17         </a-form-item>
18         <a-form-item
19           label="类型"
20           :labelCol="labelCol"
21           :wrapperCol="wrapperCol"
22         >
23           <a-radio-group v-decorator="['type',{rules: [{ required: true, message: '请选择类型!' }]}]" >
24             <a-radio-button v-for="(item,index) in typeDictTypeDropDown" :key="index" :value="item.code">{{ item.value }}</a-radio-button>
25           </a-radio-group>
26         </a-form-item>
27         <a-form-item
28           :labelCol="labelCol"
29           :wrapperCol="wrapperCol"
30           label="内容"
31         >
32           <antd-editor :uploadConfig="editorUploadConfig" v-model="editorContent" @onchange="changeEditor" @oninit="getEditor" />
33         </a-form-item>
34         <a-form-item
35           :labelCol="labelCol"
36           :wrapperCol="wrapperCol"
37           label="通知到的人"
38         >
39           <a-transfer
40             :data-source="mockData"
41             show-search
42             :list-style="{
43               width: '40%',
44               height: '300px',
45             }"
46             :filter-option="filterOption"
47             :target-keys="targetKeys"
48             :render="item => item.title"
49             @change="handleChange"
50           />
51         </a-form-item>
52         <a-divider />
53         <a-form-item class="subForm-item">
54           <a-button type="primary" class="subButton" @click="handleSubmit('1')">发布</a-button>
55           <a-button type="danger" class="subButton" @click="handleSubmit('0')">存为草稿</a-button>
56           <a-button class="subButton" @click="handleCancel">取消</a-button>
57         </a-form-item>
58       </a-form>
59     </a-spin>
60   </a-modal>
61 </template>
62 <script>
63   import { sysNoticeAdd } from '@/api/modular/system/noticeManage'
64   import { sysDictTypeDropDown } from '@/api/modular/system/dictManage'
65   import { sysFileInfoUpload } from '@/api/modular/system/fileManage'
66   import { AntdEditor } from '@/components'
67   import { sysUserSelector } from '@/api/modular/system/userManage'
68   export default {
69     name: 'AddForm',
70     components: {
71       AntdEditor
72     },
73     data () {
74       return {
75         labelCol: {
76           xs: { span: 24 },
77           sm: { span: 3 }
78         },
79         wrapperCol: {
80           xs: { span: 24 },
81           sm: { span: 18 }
82         },
83         visible: false,
84         confirmLoading: false,
85         form: this.$form.createForm(this),
86         editorContent: '',
87         editorContentText: '',
88         editorUploadConfig: {
89           method: 'http',
90           callback: this.editorUploadImage
91         },
92         mockData: [],
93         targetKeys: [],
94         typeDictTypeDropDown: [], // 0通知 1公告
95         formLoading: true
96       }
97     },
98     methods: {
99       // 初始化方法
100       add () {
101         this.visible = true
102         this.sysDictTypeDropDown()// 先注释
103         this.getMock()
104       },
105       /**
106        * 获取字典数据
107        */
108       sysDictTypeDropDown () {
109         sysDictTypeDropDown({ code: 'notice_type' }).then((res) => {
110           this.typeDictTypeDropDown = res.data
111         })
112       },
113       /**
114        * 编辑器回调上传及回传图片url
115        */
116       editorUploadImage (files, insert) {
117         const formData = new FormData()
118         files.forEach(file => {
119           formData.append('file', file)
120         })
121         sysFileInfoUpload(formData).then((res) => {
122           if (res.success) {
123             insert(process.env.VUE_APP_API_BASE_URL + '/sysFileInfo/preview?id=' + res.data)
124           } else {
125             this.$message.error('编辑器上传图片失败:' + res.message)
126           }
127         }).catch((err) => {
128           this.$message.error('预览错误:' + err.message)
129         })
130       },
131       getEditor (editor) {
132         this.editor = editor
133       },
134       changeEditor (html, ele) {
135         this.editorContent = html
136         this.editorContentText = ele.text()
137       },
138       /**
139        * 穿梭框
140        */
141       getMock () {
142         const targetKeys = []
143         const mockData = []
144         sysUserSelector().then((res) => {
145           this.formLoading = false
146           for (let i = 0; i < res.data.length; i++) {
147             const data = {
148               key: res.data[i].id.toString(),
149               title: res.data[i].name,
150               description: `description of ${res.data[i].name}`
151             }
152             mockData.push(data)
153           }
154         })
155         this.mockData = mockData
156         this.targetKeys = targetKeys
157       },
158       filterOption (inputValue, option) {
159         return option.description.indexOf(inputValue) > -1
160       },
161       handleChange (targetKeys, direction, moveKeys) {
162         this.targetKeys = targetKeys
163       },
164       handleSubmit (types) {
165         const { form: { validateFields } } = this
166         // eslint-disable-next-line eqeqeq
167         if (this.editorContent == '') {
168           this.$message.error('请填写内容')
169           return
170         }
171         if (this.targetKeys.length < 1) {
172           this.$message.error('请选择通知到的人')
173           return
174         }
175          validateFields((errors, values) => {
176             if (!errors) {
177               this.formLoading = true
178               values.content = this.editorContent
179               values.status = types
180               values.noticeUserIdList = this.targetKeys
181               sysNoticeAdd(values).then((res) => {
182                 if (res.success) {
183                   this.$message.success('新增成功')
184                   this.$emit('ok', values)
185                   this.handleCancel()
186                 } else {
187                   this.$message.error('新增失败:' + res.message)
188                 }
189               }).finally((res) => {
190                 this.formLoading = false
191               })
192             }
193           })
194       },
195       handleCancel () {
196         this.editor.txt.clear()
197         this.targetKeys = []
198         this.editorContent = ''
199         this.form.resetFields()
200         this.visible = false
201         this.formLoading = true
202       }
203     }
204   }
205 </script>
206 <style>
207   .subButton{
208     float: right;
209   }
210   .subForm-item{
211     margin-bottom: 0px;
212   }
213 </style>