ActorModal.vue 6.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216
  1. <template>
  2. <a-modal :title="title" :width="800" :visible="visible" :confirmLoading="confirmLoading" @ok="handleOk"
  3. @cancel="handleCancel" cancelText="关闭">
  4. <a-spin :spinning="confirmLoading">
  5. <a-form :form="form">
  6. <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="演员姓名">
  7. <a-input placeholder="请输入演员姓名" v-decorator="['name', validatorRules.name ]" />
  8. </a-form-item>
  9. <a-form-item label="封面" :labelCol="labelCol" :wrapperCol="wrapperCol">
  10. <!-- <upload-to-ali
  11. v-model="coverUrl"
  12. :customDomain="customDomain"
  13. preview
  14. :region="region"
  15. :bucket="bucket"
  16. :accept="acceptImage"
  17. :max="1"
  18. :size="1024000"
  19. :accessKeyId="accessKeyId"
  20. :accessKeySecret="accessKeySecret"
  21. ></upload-to-ali> -->
  22. <uploadFile :value.sync="coverUrl" :fileCount="1" uploadType="image" :multiple="false" :sizeCheck="false"/>
  23. </a-form-item>
  24. <a-form-item label="照片" :labelCol="labelCol" :wrapperCol="wrapperCol" v-if="!model.name">
  25. <uploadFile :value.sync="imageUrl" :fileCount="10" uploadType="image" :sizeCheck="false"/>
  26. <!-- <upload-to-ali v-model="imageUrl" :customDomain="customDomain" multiple preview :region="region"
  27. :bucket="bucket" :accept="acceptImage" :max="10" :size="1024000" :accessKeyId="accessKeyId"
  28. :accessKeySecret="accessKeySecret"></upload-to-ali> -->
  29. </a-form-item>
  30. <a-form-item label="视频作品" :labelCol="labelCol" :wrapperCol="wrapperCol" v-if="!model.name">
  31. <uploadFile :value.sync="videoUrl" :fileCount="10" uploadType="video" :sizeCheck="false"/>
  32. <!-- <upload-to-ali v-model="videoUrl" :customDomain="customDomain" multiple preview :region="region"
  33. :bucket="bucket" :accept="acceptVideo" :max="10" :size="1024000" :accessKeyId="accessKeyId"
  34. :accessKeySecret="accessKeySecret"></upload-to-ali> -->
  35. </a-form-item>
  36. <a-form-item label="生日" :labelCol="labelCol" :wrapperCol="wrapperCol">
  37. <a-date-picker style="width: 100%" placeholder="请选择生日"
  38. v-decorator="['birthday', {initialValue:!model.birthday?null:moment(model.birthday,dateFormat)}]" />
  39. </a-form-item>
  40. <a-form-item label="性别" :labelCol="labelCol" :wrapperCol="wrapperCol">
  41. <a-select v-decorator="[ 'sex', {}]" placeholder="请选择性别">
  42. <a-select-option :value="1">男</a-select-option>
  43. <a-select-option :value="2">女</a-select-option>
  44. </a-select>
  45. </a-form-item>
  46. <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="特长">
  47. <a-input placeholder="请输入特长" v-decorator="['speciality']" />
  48. </a-form-item>
  49. </a-form>
  50. </a-spin>
  51. </a-modal>
  52. </template>
  53. <script>
  54. import uploadFile from '@/components/uploadFile.vue'
  55. import {
  56. httpAction
  57. } from '@/api/manage'
  58. import pick from 'lodash.pick'
  59. import JTreeSelect from '@/components/jeecg/JTreeSelect'
  60. import moment from 'moment'
  61. import UploadToAli from '@femessage/upload-to-ali'
  62. export default {
  63. name: "ActorModal",
  64. components: {
  65. UploadToAli,
  66. JTreeSelect,
  67. uploadFile
  68. },
  69. data() {
  70. return {
  71. title: "操作",
  72. visible: false,
  73. model: {},
  74. videoUrl: [],
  75. imageUrl: [],
  76. coverUrl: "",
  77. customDomain: '',
  78. region: 'oss-cn-beijing',
  79. bucket: 'ctop-media',
  80. acceptVideo: 'video/mpeg,video/mp4',
  81. acceptImage: 'image/jpeg,image/jpg,image/png',
  82. accessKeyId: 'LTAIbNbqWzSOklQV',
  83. accessKeySecret: '1rkPz7JNoXk8sJevPaeYHWqfkQXBGh',
  84. dateFormat: "YYYY-MM-DD",
  85. labelCol: {
  86. xs: {
  87. span: 24
  88. },
  89. sm: {
  90. span: 5
  91. },
  92. },
  93. wrapperCol: {
  94. xs: {
  95. span: 24
  96. },
  97. sm: {
  98. span: 16
  99. },
  100. },
  101. confirmLoading: false,
  102. form: this.$form.createForm(this),
  103. validatorRules: {
  104. name: {
  105. rules: [{
  106. required: true,
  107. message: '请输入演员姓名!'
  108. }]
  109. },
  110. // sex:{initialValue:((!this.model.sex)?"": (this.model.sex+""))},
  111. },
  112. url: {
  113. add: "/ctop/actor/add",
  114. edit: "/ctop/actor/edit",
  115. },
  116. }
  117. },
  118. created() {},
  119. methods: {
  120. fileWater() {
  121. return new Promise(function (resolve, reject) {
  122. })
  123. },
  124. add() {
  125. this.imageUrl = []
  126. this.videoUrl = []
  127. this.coverUrl = ""
  128. this.edit({});
  129. },
  130. edit(record) {
  131. console.log(record)
  132. let that = this;
  133. that.form.resetFields();
  134. that.model = Object.assign({}, record);
  135. that.visible = true;
  136. that.coverUrl = record.coverUrl?record.coverUrl:''
  137. // that.imageUrl = ""
  138. // that.videoUrl = ""
  139. that.$nextTick(() => {
  140. that.form.setFieldsValue(pick(this.model, 'name', 'sex', 'speciality'))
  141. //时间格式化
  142. });
  143. },
  144. close() {
  145. this.$emit('close');
  146. this.visible = false;
  147. },
  148. moment,
  149. handleOk() {
  150. const that = this;
  151. // 触发表单验证
  152. this.form.validateFields((err, values) => {
  153. if (!err) {
  154. that.confirmLoading = true;
  155. let httpurl = '';
  156. let method = '';
  157. if (!this.model.id) {
  158. httpurl += this.url.add;
  159. method = 'post';
  160. } else {
  161. httpurl += this.url.edit;
  162. method = 'put';
  163. }
  164. if (!values.birthday) {
  165. values.birthday = '';
  166. } else {
  167. values.birthday = values.birthday.format(this.dateFormat);
  168. }
  169. values.imageUrl = this.imageUrl;
  170. values.coverUrl = this.coverUrl
  171. values.videoUrl = this.videoUrl;
  172. let formData = Object.assign(this.model, values);
  173. //时间格式化
  174. console.log(formData)
  175. httpAction(httpurl, formData, method).then((res) => {
  176. if (res.success) {
  177. that.$message.success(res.message);
  178. that.$emit('ok');
  179. that.$emit("updateList")
  180. this.imageUrl = []
  181. this.videoUrl = []
  182. this.coverUrl = ""
  183. } else {
  184. that.$message.warning(res.message);
  185. }
  186. }).finally(() => {
  187. that.confirmLoading = false;
  188. that.close();
  189. })
  190. }
  191. })
  192. },
  193. handleCancel() {
  194. this.close()
  195. },
  196. }
  197. }
  198. </script>
  199. <style lang="less" scoped>
  200. </style>