|
@@ -0,0 +1,206 @@
|
|
|
+<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="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"
|
|
|
+ >
|
|
|
+ <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 {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
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ title: "操作",
|
|
|
+ visible: false,
|
|
|
+ model: {},
|
|
|
+ videoUrl: [],
|
|
|
+ imageUrl: [],
|
|
|
+ customDomain: '',
|
|
|
+ region: 'oss-cn-beijing',
|
|
|
+ bucket: 'ctop-media',
|
|
|
+ acceptVideo: 'video/mpeg,video/mp4',
|
|
|
+ acceptImage: 'image/jpeg,image,jpg/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: {
|
|
|
+ add() {
|
|
|
+ this.edit({});
|
|
|
+ },
|
|
|
+ edit(record) {
|
|
|
+
|
|
|
+ let that = this;
|
|
|
+ that.form.resetFields();
|
|
|
+ that.model = Object.assign({}, record);
|
|
|
+ that.visible = true;
|
|
|
+ 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);
|
|
|
+ }
|
|
|
+ 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');
|
|
|
+ } else {
|
|
|
+ that.$message.warning(res.message);
|
|
|
+ }
|
|
|
+ }).finally(() => {
|
|
|
+ that.confirmLoading = false;
|
|
|
+ that.close();
|
|
|
+ })
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleCancel() {
|
|
|
+ this.close()
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+
|
|
|
+</style>
|