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