123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216 |
- <template>
- <a-modal :title="title" :width="800" :visible="visible" :confirmLoading="confirmLoading" @ok="handleOk"
- @cancel="handleCancel" cancelText="关闭">
- <a-spin :spinning="confirmLoading">
- <a-form :form="form">
- <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="演员姓名">
- <a-input placeholder="请输入演员姓名" v-decorator="['name', validatorRules.name ]" />
- </a-form-item>
- <a-form-item label="封面" :labelCol="labelCol" :wrapperCol="wrapperCol">
- <!-- <upload-to-ali
- v-model="coverUrl"
- :customDomain="customDomain"
- preview
- :region="region"
- :bucket="bucket"
- :accept="acceptImage"
- :max="1"
- :size="1024000"
- :accessKeyId="accessKeyId"
- :accessKeySecret="accessKeySecret"
- ></upload-to-ali> -->
- <uploadFile :value.sync="coverUrl" :fileCount="1" uploadType="image" :multiple="false" :sizeCheck="false"/>
- </a-form-item>
- <a-form-item label="照片" :labelCol="labelCol" :wrapperCol="wrapperCol" v-if="!model.name">
- <uploadFile :value.sync="imageUrl" :fileCount="10" uploadType="image" :sizeCheck="false"/>
- <!-- <upload-to-ali v-model="imageUrl" :customDomain="customDomain" multiple preview :region="region"
- :bucket="bucket" :accept="acceptImage" :max="10" :size="1024000" :accessKeyId="accessKeyId"
- :accessKeySecret="accessKeySecret"></upload-to-ali> -->
- </a-form-item>
- <a-form-item label="视频作品" :labelCol="labelCol" :wrapperCol="wrapperCol" v-if="!model.name">
- <uploadFile :value.sync="videoUrl" :fileCount="10" uploadType="video" :sizeCheck="false"/>
- <!-- <upload-to-ali v-model="videoUrl" :customDomain="customDomain" multiple preview :region="region"
- :bucket="bucket" :accept="acceptVideo" :max="10" :size="1024000" :accessKeyId="accessKeyId"
- :accessKeySecret="accessKeySecret"></upload-to-ali> -->
- </a-form-item>
- <a-form-item label="生日" :labelCol="labelCol" :wrapperCol="wrapperCol">
- <a-date-picker style="width: 100%" placeholder="请选择生日"
- v-decorator="['birthday', {initialValue:!model.birthday?null:moment(model.birthday,dateFormat)}]" />
- </a-form-item>
- <a-form-item label="性别" :labelCol="labelCol" :wrapperCol="wrapperCol">
- <a-select v-decorator="[ 'sex', {}]" placeholder="请选择性别">
- <a-select-option :value="1">男</a-select-option>
- <a-select-option :value="2">女</a-select-option>
- </a-select>
- </a-form-item>
- <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="特长">
- <a-input placeholder="请输入特长" v-decorator="['speciality']" />
- </a-form-item>
- </a-form>
- </a-spin>
- </a-modal>
- </template>
- <script>
- import uploadFile from '@/components/uploadFile.vue'
- import {
- httpAction
- } from '@/api/manage'
- import pick from 'lodash.pick'
- import JTreeSelect from '@/components/jeecg/JTreeSelect'
- import moment from 'moment'
- import UploadToAli from '@femessage/upload-to-ali'
- export default {
- name: "ActorModal",
- components: {
- UploadToAli,
- JTreeSelect,
- uploadFile
- },
- data() {
- return {
- title: "操作",
- visible: false,
- model: {},
- videoUrl: [],
- imageUrl: [],
- coverUrl: "",
- customDomain: '',
- region: 'oss-cn-beijing',
- bucket: 'ctop-media',
- acceptVideo: 'video/mpeg,video/mp4',
- acceptImage: 'image/jpeg,image/jpg,image/png',
- accessKeyId: 'LTAIbNbqWzSOklQV',
- accessKeySecret: '1rkPz7JNoXk8sJevPaeYHWqfkQXBGh',
- dateFormat: "YYYY-MM-DD",
- labelCol: {
- xs: {
- span: 24
- },
- sm: {
- span: 5
- },
- },
- wrapperCol: {
- xs: {
- span: 24
- },
- sm: {
- span: 16
- },
- },
- confirmLoading: false,
- form: this.$form.createForm(this),
- validatorRules: {
- name: {
- rules: [{
- required: true,
- message: '请输入演员姓名!'
- }]
- },
- // sex:{initialValue:((!this.model.sex)?"": (this.model.sex+""))},
- },
- url: {
- add: "/ctop/actor/add",
- edit: "/ctop/actor/edit",
- },
- }
- },
- created() {},
- methods: {
- fileWater() {
- return new Promise(function (resolve, reject) {
- })
- },
- add() {
- this.imageUrl = []
- this.videoUrl = []
- this.coverUrl = ""
- this.edit({});
- },
- edit(record) {
- console.log(record)
- let that = this;
- that.form.resetFields();
- that.model = Object.assign({}, record);
- that.visible = true;
- that.coverUrl = record.coverUrl?record.coverUrl:''
- // that.imageUrl = ""
- // that.videoUrl = ""
- that.$nextTick(() => {
- that.form.setFieldsValue(pick(this.model, 'name', 'sex', 'speciality'))
- //时间格式化
- });
- },
- close() {
- this.$emit('close');
- this.visible = false;
- },
- moment,
- handleOk() {
- const that = this;
- // 触发表单验证
- this.form.validateFields((err, values) => {
- if (!err) {
- that.confirmLoading = true;
- let httpurl = '';
- let method = '';
- if (!this.model.id) {
- httpurl += this.url.add;
- method = 'post';
- } else {
- httpurl += this.url.edit;
- method = 'put';
- }
- if (!values.birthday) {
- values.birthday = '';
- } else {
- values.birthday = values.birthday.format(this.dateFormat);
- }
- values.imageUrl = this.imageUrl;
- values.coverUrl = this.coverUrl
- values.videoUrl = this.videoUrl;
- let formData = Object.assign(this.model, values);
- //时间格式化
- console.log(formData)
- httpAction(httpurl, formData, method).then((res) => {
- if (res.success) {
- that.$message.success(res.message);
- that.$emit('ok');
- that.$emit("updateList")
- this.imageUrl = []
- this.videoUrl = []
- this.coverUrl = ""
- } else {
- that.$message.warning(res.message);
- }
- }).finally(() => {
- that.confirmLoading = false;
- that.close();
- })
- }
- })
- },
- handleCancel() {
- this.close()
- },
- }
- }
- </script>
- <style lang="less" scoped>
- </style>
|