Browse Source

'改工具管理'

魏志佳 4 years ago
parent
commit
f046b95ede

+ 184 - 0
src/components/ctop/propModal.vue

@@ -0,0 +1,184 @@
+<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">
+          <uploadFile  v-if="visible" :value.sync="imageUrl" :fileCount="10"
+            uploadType="image" />
+          <!-- <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">
+          <a-input placeholder="请输入道具类型" v-decorator="['type']" />
+        </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="['desc']" />
+        </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'
+  import uploadFile from '@/components/uploadFile.vue'
+  export default {
+    name: "ActorModal",
+    components: {
+      UploadToAli,
+      JTreeSelect,
+      uploadFile
+    },
+    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,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/prop/add",
+          edit: "/ctop/prop/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', 'desc'))
+          //时间格式化
+        });
+
+      },
+      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.coverUrl = this.imageUrl[0]
+            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")
+              } else {
+                that.$message.warning(res.message);
+              }
+            }).finally(() => {
+              that.confirmLoading = false;
+              that.close();
+            })
+
+
+          }
+        })
+      },
+      handleCancel() {
+        this.close()
+      },
+
+
+    }
+  }
+</script>
+
+<style lang="less" scoped>
+
+</style>

+ 11 - 5
src/components/ctop/vm-card.vue

@@ -192,7 +192,7 @@ li {
           </div>
         </a-tab-pane>
       </a-tabs>
-      <div v-else>
+      <div v-if="pageTitle=='道具列表'">
         <div style="display:flex;flex-direction:row;height:200px;">
             <div
               style="height:200px;width:30%;border:1px solid #f2f2f2;"
@@ -258,7 +258,8 @@ li {
         :accessKeySecret="accessKeySecret"
       ></upload-to-ali> -->
     </a-modal>
-    <actor-modal ref="modalForm" @ok="modalFormOk" @updateList="updateList" @close="closeVideo"></actor-modal>
+    <actor-modal ref="modalForm" @ok="modalFormOk" @updateList="updateList" @close="closeVideo" v-show="pageTitle=='演员管理'" ></actor-modal>
+    <propModal ref="modalForm" @ok="modalFormOk" @updateList="updateList" @close="closeVideo" v-show="pageTitle=='道具管理'" ></propModal>
   </div>
 </template>
 <script>
@@ -281,13 +282,16 @@ import UploadToAli from '@femessage/upload-to-ali'
   import uploadFile from '@/components/uploadFile.vue'
 import { JeecgListMixin } from '@/mixins/JeecgListMixin'
 import { closeAllVideoFun } from '@/utils/videoControl'
+
+import propModal from './propModal'
 export default {
   name: 'VmCard',
   mixins: [JeecgListMixin],
   components: {
     actorModal,
     UploadToAli,
-    uploadFile
+    uploadFile,
+    propModal
   },
   props: {
     type: {
@@ -311,8 +315,10 @@ export default {
     },
     desc: {
       type: String,
-      default:
-        "Lorem Ipsum is simply dummy text of the printing and typesetting industry,Lorem Ipsum has been the industry's standard dummy text ever since the 1500s"
+      default(){
+        return ""
+      }
+       
     },
     detailUrl: {
       type: String,

+ 10 - 7
src/components/ctop/vm-image-list.vue

@@ -79,14 +79,14 @@
           :editUrl="item.editUrl"      
           :pageTitle='title'   
           :id="item.id"
-          :record="item"
-          
+          :record="item"          
           @delete-ok="deleteOk({...item,'page':currentPage})"
           @updateList="updateList"
         ></vm-card>
       </a-col>
     </a-row>
-    <actor-modal ref="modalForm" @ok="modalFormOk" @updateList="updateList"></actor-modal>
+    <actor-modal ref="modalForm" @ok="modalFormOk" @updateList="updateList" v-if="title=='演员列表'"></actor-modal>
+    <propModal ref="modalForm" @ok="modalFormOk" @updateList="updateList" v-if="title=='道具列表'"></propModal>
   </div>
 </template>
 
@@ -95,6 +95,7 @@ import VmCard from '@/components/ctop/vm-card'
 import ARow from 'ant-design-vue/es/grid/Row'
 import ACol from 'ant-design-vue/es/grid/Col'
 import actorModal from './ActorModal'
+import propModal from './propModal'
 import { JeecgListMixin } from '@/mixins/JeecgListMixin'
 export default {
   name: 'VmImageList',
@@ -102,12 +103,11 @@ export default {
     ACol,
     ARow,
     VmCard,
-    actorModal
+    actorModal,
+    propModal
   },
   mixins: [JeecgListMixin],
-  provide:{
-    page:currentPage,
-  },
+  
   props: {
     title: {
       type: String,
@@ -185,6 +185,9 @@ export default {
       ]
     }
   },
+  // provide:{
+  //   page:this.currentPage,
+  // },
   methods: {
     updateList() {
       this.$emit('updateList')

+ 2 - 2
src/views/modules/actor/ActorList.vue

@@ -14,7 +14,7 @@
     components: {
       VmImageList
     },
-    inject:[page],
+    // inject:[page],
     mounted() {
       this.$nextTick(() => {
         this.getActorList(1)
@@ -33,7 +33,7 @@
             //     this.dataImageList.splice(i, 1)
             //   }
             // }
-            this.getActorList(this.page)
+            this.getActorList(data.page)
           }else{
             this.$message.error('删除失败,稍后再试')
           }

+ 1 - 0
src/views/modules/prop/modules/vm-image-list.vue

@@ -81,6 +81,7 @@
           :record="item"
           @delete-ok="deleteOk(item)"
           @updateList="updateList"
+          
         ></vm-card>
       </a-col>
     </a-row>

+ 16 - 16
src/views/modules/prop/prop.vue

@@ -4,7 +4,7 @@
 </template>
 
 <script>
-  import VmImageList from './modules/vm-image-list'
+  import VmImageList from '@/components/ctop/vm-image-list'
   import {
     propList,
     propListDelete
@@ -22,22 +22,22 @@
     methods: {
       deletefn: function (data) {
         console.log('最外层deleteFn执行',data)
-        // propListDelete({
-        //   id:data.id
-        // }).then(res=>{
-        //   if(res.success){
-        //     this.$message.success('删除成功')
-        //     // for (let i = 0; i < this.dataImageList.length; i++) {
-        //     //   if (this.dataImageList[i].id === data.id) {
-        //     //     this.dataImageList.splice(i, 1)
-        //     //   }
-        //     // }
-        //     this.getActorList()
-        //   }else{
-        //     this.$message.error('删除失败,稍后再试')
-        //   }
+        propListDelete({
+          id:data.id
+        }).then(res=>{
+          if(res.success){
+            this.$message.success('删除成功')
+            // for (let i = 0; i < this.dataImageList.length; i++) {
+            //   if (this.dataImageList[i].id === data.id) {
+            //     this.dataImageList.splice(i, 1)
+            //   }
+            // }
+            this.getActorList(data.page)
+          }else{
+            this.$message.error('删除失败,稍后再试')
+          }
           
-        // })
+        })
       },
       getActorList(page, name) {
         this.dataImageList = []