editModal.vue 6.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216
  1. <template>
  2. <a-modal
  3. centered
  4. class="productBrandEdit-modal"
  5. :footer="null"
  6. :maskClosable="false"
  7. :title="modalTit"
  8. v-model="isShow"
  9. @cancle="isShow=false"
  10. :width="960">
  11. <!-- 表单 -->
  12. <div>
  13. <a-spin :spinning="spinning" tip="Loading...">
  14. <a-form-model
  15. id="productBrandEdit-form"
  16. ref="ruleForm"
  17. :model="form"
  18. :rules="rules"
  19. :label-col="formItemLayout.labelCol"
  20. :wrapper-col="formItemLayout.wrapperCol"
  21. >
  22. <a-form-model-item label="品牌名称" prop="brandName">
  23. <a-input
  24. id="productBrandEdit-brandName"
  25. :maxLength="30"
  26. v-model.trim="form.brandName"
  27. placeholder="请输入产品品牌名称(最多30个字符)"
  28. allowClear />
  29. </a-form-model-item>
  30. <a-form-model-item label="品牌分类" prop="brandType">
  31. <v-select code="BRAND_TYPE" id="productBrandEdit-brandType" v-model="form.brandType" allowClear placeholder="请选择品牌分类"></v-select>
  32. </a-form-model-item>
  33. <a-form-model-item label="排序字母" prop="sortChar">
  34. <a-select placeholder="请选择排序字母" id="productBrandEdit-sortChar" allowClear v-model="form.sortChar">
  35. <a-select-option v-for="item in sortCharList" :key="item.id" :value="item.id">{{ item.name }}</a-select-option>
  36. </a-select>
  37. </a-form-model-item>
  38. <a-form-model-item label="品牌图片" prop="imageUrl">
  39. <Upload
  40. class="upload"
  41. id="productBrandEdit-imageUrl"
  42. v-model="form.imageUrl"
  43. ref="imageUrl"
  44. @change="changeHomeImage"
  45. listType="picture-card" ></Upload>
  46. <span class="upload-desc">说明:图片比例1:1,尺寸为120*120px,可上传1张。</span>
  47. </a-form-model-item>
  48. <a-form-model-item label="品牌介绍" prop="brandIntroduce">
  49. <editor id="productBrandEdit-brandIntroduce" ref="editor" class="productBrandEdit-brandIntroduce" @on-change="editorChange" :cache="false"></editor>
  50. </a-form-model-item>
  51. </a-form-model>
  52. <div class="btn-cont">
  53. <a-button type="primary" id="product-brand-edit-modal-save" @click="handleSave">保存</a-button>
  54. <a-button id="product-brand-edit-modal-back" @click="isShow = false" style="margin-left: 15px;">返回列表</a-button>
  55. </div>
  56. </a-spin>
  57. </div>
  58. </a-modal>
  59. </template>
  60. <script>
  61. import { commonMixin } from '@/utils/mixin'
  62. import { VSelect, Upload } from '@/components'
  63. import Editor from '@/components/WEeditor'
  64. import dataList from '@/libs/commonData'
  65. import { productBrandSnDetail, productBrandSave } from '@/api/productBrand'
  66. export default {
  67. name: 'ProductBrandEditModal',
  68. mixins: [commonMixin],
  69. components: { VSelect, Upload, Editor },
  70. props: {
  71. openModal: { // 弹框显示状态
  72. type: Boolean,
  73. default: false
  74. },
  75. itemSn: {
  76. type: [Number, String],
  77. default: ''
  78. },
  79. nowData: {
  80. type: Object,
  81. default: null
  82. }
  83. },
  84. computed: {
  85. modalTit () {
  86. return (this.itemSn ? '编辑' : '新增') + '产品品牌'
  87. }
  88. },
  89. data () {
  90. return {
  91. sortCharList: dataList.sortCharList,
  92. isShow: this.openModal, // 是否打开弹框
  93. spinning: false,
  94. formItemLayout: {
  95. labelCol: { span: 3 },
  96. wrapperCol: { span: 19 }
  97. },
  98. form: {
  99. brandName: '', // 品牌名称
  100. brandType: undefined,
  101. sortChar: undefined,
  102. imageUrl: '',
  103. brandIntroduce: ''
  104. },
  105. rules: {
  106. brandName: [
  107. { required: true, message: '请输入品牌名称', trigger: 'blur' }
  108. ],
  109. brandType: [
  110. { required: true, message: '请选择品牌分类', trigger: 'change' }
  111. ],
  112. sortChar: [
  113. { required: true, message: '请选择排序字母', trigger: 'change' }
  114. ],
  115. imageUrl: [
  116. { required: true, message: '请上传品牌图片', trigger: 'change' }
  117. ]
  118. }
  119. }
  120. },
  121. methods: {
  122. // 详情
  123. getDetail () {
  124. productBrandSnDetail({ sn: this.itemSn }).then(res => {
  125. if (res.status == 200) {
  126. const data = res.data
  127. this.form = Object.assign(this.form, data)
  128. this.$refs.imageUrl.setFileList(data.imageUrl)
  129. this.$refs.editor.setHtml(res.data.brandIntroduce)
  130. } else {
  131. this.$refs.ruleForm.resetFields()
  132. }
  133. })
  134. },
  135. // 保存
  136. handleSave () {
  137. const _this = this
  138. _this.$refs.ruleForm.validate(valid => {
  139. if (valid) {
  140. const formData = JSON.parse(JSON.stringify(_this.form))
  141. formData.id = undefined
  142. formData.brandSn = _this.itemSn ? _this.itemSn : undefined
  143. _this.spinning = true
  144. productBrandSave(formData).then(res => {
  145. if (res.status == 200) {
  146. _this.$message.success(res.message)
  147. _this.$emit('ok')
  148. _this.isShow = false
  149. _this.spinning = false
  150. } else {
  151. _this.spinning = false
  152. }
  153. })
  154. } else {
  155. return false
  156. }
  157. })
  158. },
  159. // 图片上传
  160. changeHomeImage (file) {
  161. this.form.imageUrl = file
  162. },
  163. // 文本编辑器
  164. editorChange (html, text) {
  165. this.form.brandIntroduce = html
  166. }
  167. },
  168. watch: {
  169. // 父页面传过来的弹框状态
  170. openModal (newValue, oldValue) {
  171. this.isShow = newValue
  172. },
  173. // 重定义的弹框状态
  174. isShow (newValue, oldValue) {
  175. if (!newValue) {
  176. this.$emit('close')
  177. this.$refs.imageUrl.setFileList('')
  178. this.$refs.editor.setHtml('')
  179. this.$refs.ruleForm.resetFields()
  180. }
  181. },
  182. itemSn (newValue, oldValue) {
  183. if (this.isShow && newValue) {
  184. this.getDetail()
  185. }
  186. }
  187. }
  188. }
  189. </script>
  190. <style lang="less">
  191. .productBrandEdit-modal{
  192. .ant-modal-body {
  193. padding: 40px 40px 24px;
  194. }
  195. .upload{
  196. width: 100%!important;
  197. }
  198. // 商品图片描述
  199. .upload-desc{
  200. font-size: 12px;
  201. color: #808695;
  202. }
  203. // 文本编辑器 工具栏样式换行
  204. .productBrandEdit-editor{
  205. .w-e-toolbar{
  206. flex-wrap: wrap;
  207. }
  208. }
  209. .btn-cont {
  210. text-align: center;
  211. margin: 35px 0 10px;
  212. }
  213. }
  214. </style>