addBrand.vue 7.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251
  1. <template>
  2. <el-dialog :title="brand.BrandID?'品牌修改':'添加品牌'" :visible.sync="outerVisible" class="add-brand" width="600px">
  3. <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-position="top" class="reset-form">
  4. <el-form-item label="中文名称:" prop="BrandCname">
  5. <el-input v-model.trim="ruleForm.BrandCname" placeholder="请输入" />
  6. </el-form-item>
  7. <el-form-item label="英文名称:">
  8. <el-input v-model.trim="ruleForm.BrandName" placeholder="请输入" />
  9. </el-form-item>
  10. <el-form-item label="品牌LOGO:">
  11. <div class="logo">
  12. <el-upload style="flex: 1;" class="avatar-uploader" action="#" :http-request="uploadAndSubmit"
  13. :show-file-list="false" :before-upload="beforeAvatarUpload">
  14. <i v-if="ruleForm.BrandLogo" class="el-icon-error delete-image" @click.stop="handleClickDelImg"></i>
  15. <img v-if="ruleForm.BrandLogo" :src="`/image-service/common/image_get?systemId=dataPlatform&key=${ruleForm.BrandLogo}`" class="avatar">
  16. <i v-else class="el-icon-plus avatar-uploader-icon"></i>
  17. </el-upload>
  18. <span class="imgTip">支持格式GIF、JPG、JPEG、PNG,文件80K以内,建议尺寸80PX*80PX</span>
  19. </div>
  20. </el-form-item>
  21. </el-form>
  22. <div slot="footer" class="dialog-footer">
  23. <el-button v-if="brand.BrandID" @click="innerVisible = true" type="text" style="padding-right: 10px;color: #646C73">删除品牌</el-button>
  24. <el-button @click="outerVisible = false">取 消</el-button>
  25. <el-button type="primary" @click="submitForm('ruleForm')">{{brand.BrandID?'保 存':'添 加'}}</el-button>
  26. </div>
  27. <el-dialog width="420px" title="确定要删除该品牌吗?" :visible.sync="innerVisible" :show-close="false" class="child-dialog"
  28. append-to-body>
  29. <div slot="title" class="header-title">
  30. <span class="el-icon-info" style="font-size: 24px;color: #F54E45;margin-right: 10px"> </span>
  31. <span class="del-text">确定要删除该品牌吗?</span>
  32. <p class="del-tip">删除后该品牌的所有信息将被删除,不可恢复</p>
  33. </div>
  34. <div slot="footer" class="dialog-footer">
  35. <el-button @click="innerVisible = false">取 消</el-button>
  36. <el-button type="danger" @click="handleClickDelete">删除</el-button>
  37. </div>
  38. </el-dialog>
  39. </el-dialog>
  40. </template>
  41. <script>
  42. import { brandCreate, brandDelete, brandUpdate } from "@/api/brand"
  43. export default {
  44. name: "addBrand",
  45. props: {
  46. brand: {
  47. type: Object,
  48. default: {}
  49. }
  50. },
  51. data() {
  52. return {
  53. outerVisible: false,
  54. innerVisible: false,
  55. ruleForm: {
  56. BrandCname: '',
  57. BrandName: '',
  58. BrandLogo: '',
  59. },
  60. rules: {
  61. BrandCname: [{ required: true, message: '请输入中文名称', trigger: 'blur' }],
  62. },
  63. key: "",
  64. }
  65. },
  66. methods: {
  67. uploadAndSubmit(item) {// 上传图片
  68. let file = item.file
  69. let _this = this
  70. //获取文件后缀名
  71. let fileType = file.name.split('.')
  72. let type = fileType[fileType.length -1]
  73. this.key = `${file.uid}.${type}`
  74. let reader = new FileReader();
  75. reader.onloadend = function () {
  76. // 这个事件在读取结束后,无论成功或者失败都会触发
  77. if (reader.error) {
  78. } else {
  79. var xhr = new XMLHttpRequest();
  80. xhr.open(
  81. "POST",
  82. `/image-service/common/image_upload?systemId=dataPlatform&secret=9e0891a7a8c8e885&overwrite=true&key=${_this.key}`
  83. );
  84. xhr.send(reader.result);
  85. xhr.onreadystatechange = function () {
  86. if (xhr.readyState == 4) {
  87. if (xhr.status == 200) {
  88. _this.ruleForm.BrandLogo = _this.key
  89. }
  90. }
  91. };
  92. }
  93. };
  94. reader.readAsArrayBuffer(file);
  95. },
  96. beforeAvatarUpload(file) {
  97. const typeList = ['image/jpeg','image/png','image/gif']
  98. const isType = typeList.some(item => {return item === file.type});
  99. const isLt80K = file.size / 1024 <= 80;
  100. if (!isType) {
  101. this.$message.error('上传头像图片格式不支持!')
  102. return false
  103. }
  104. if (!isLt80K) {
  105. this.$message.error('上传头像图片大小不能超过 80K!')
  106. return false
  107. }
  108. return isType && isLt80K;
  109. },
  110. handleClickDelImg() {
  111. this.ruleForm.BrandLogo = ""
  112. },
  113. submitForm(formName) { //(添加/修改)
  114. this.$refs[formName].validate((valid) => {
  115. if (valid) {
  116. let params = {
  117. Content: [{
  118. BrandCname: this.ruleForm.BrandCname,
  119. BrandName: this.ruleForm.BrandName,
  120. BrandLogo: this.ruleForm.BrandLogo,
  121. }]
  122. }
  123. if (this.brand.BrandID) { //修改品牌
  124. params.Content[0].BrandID = this.brand.BrandID
  125. brandUpdate(params, res => {
  126. this.outerVisible = false
  127. this.$emit("refresh")
  128. this.$message.success('保存成功!')
  129. })
  130. } else { //添加品牌
  131. brandCreate(params, res => {
  132. this.outerVisible = false
  133. this.ruleForm = { BrandCname: '', BrandName: '', BrandLogo: '' }
  134. this.$emit("refresh",res.EntityList)
  135. this.$message.success('添加成功!')
  136. })
  137. }
  138. } else {
  139. console.log('error submit!!')
  140. return false
  141. }
  142. });
  143. },
  144. handleClickDelete() { //删除品牌
  145. brandDelete([{BrandID: this.brand.BrandID}], res => {
  146. this.innerVisible = false
  147. this.outerVisible = false
  148. this.$emit("refresh")
  149. this.$message.success('删除成功!')
  150. })
  151. },
  152. },
  153. watch: {
  154. outerVisible: {
  155. handler(newName, oldName) {
  156. if (this.brand.BrandID && newName) {
  157. this.ruleForm.BrandCname = this.brand.BrandCname
  158. this.ruleForm.BrandName = this.brand.BrandName || ''
  159. this.ruleForm.BrandLogo = this.brand.BrandLogo || ''
  160. } else if (!newName && this.brand.BrandID) {
  161. this.ruleForm = { BrandCname: '', BrandName: '', BrandLogo: '' }
  162. }
  163. },
  164. immediate: true,
  165. }
  166. }
  167. }
  168. </script>
  169. <style scoped lang="less">
  170. .add-brand {
  171. /deep/ .el-dialog__header {
  172. border-bottom: 1px solid #e4e5e7;
  173. }
  174. .reset-form {
  175. width: 320px;
  176. margin: 0 auto;
  177. .logo {
  178. display: flex;
  179. .imgTip {
  180. font-size: 12px;
  181. color: #c3c7cb;
  182. line-height: 18px;
  183. margin-left: 8px;
  184. margin-bottom: 78px;
  185. }
  186. .delete-image {
  187. color: rgba(31,36,41,0.5);
  188. position:absolute;
  189. top:5px;
  190. right:5px;
  191. }
  192. .delete-image:hover {
  193. color: #F56C6C;
  194. }
  195. }
  196. }
  197. }
  198. .child-dialog {
  199. /deep/ .el-dialog__body {
  200. padding: 0;
  201. }
  202. }
  203. .header-title {
  204. .del-text {
  205. color: #1f2329;
  206. font-size: 16px;
  207. font-weight: 500;
  208. display: inline-block;
  209. }
  210. .del-tip {
  211. margin-left: 39px;
  212. color: #646a73;
  213. }
  214. }
  215. </style>
  216. <style>
  217. .avatar-uploader .el-upload {
  218. border: 1px dashed #d9d9d9;
  219. border-radius: 6px;
  220. cursor: pointer;
  221. position: relative;
  222. overflow: hidden;
  223. }
  224. .avatar-uploader .el-upload:hover {
  225. border-color: #409eff;
  226. }
  227. .avatar-uploader-icon {
  228. font-size: 28px;
  229. color: #8c939d;
  230. width: 112px;
  231. height: 112px;
  232. line-height: 112px !important;
  233. text-align: center;
  234. }
  235. .avatar {
  236. width: 112px;
  237. height: 112px;
  238. display: block;
  239. }
  240. </style>